<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/blog/blog/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/blog/blog/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="斯人若彩虹 遇上方知有">
<meta property="og:url" content="https://bruce-jj.gitee.io/blog/page/3/index.html">
<meta property="og:site_name" content="斯人若彩虹 遇上方知有">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="何水浪">
<meta name="twitter:card" content="summary"><title>斯人若彩虹 遇上方知有</title><link ref="canonical" href="https://bruce-jj.gitee.io/blog/page/3/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/blog/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/blog/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"default","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: false,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: undefined,
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/blog/atom.xml" title="斯人若彩虹 遇上方知有" type="application/atom+xml">
</head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/friends/"><span class="header-nav-menu-item__icon"><i class="fas fa-link"></i></span><span class="header-nav-menu-item__text">友链</span></a></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">斯人若彩虹 遇上方知有</div><div class="header-banner-info__subtitle"></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content content-home" id="content"><section class="postlist"><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/09/hello/">hello</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-06</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">0</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">1分</span></span></div></header><div class="post-body"><div class="post-excerpt"></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/09/%E4%B8%8D%E4%BC%9A%E5%90%A7%E8%80%83%E7%A0%94%E6%95%B0%E5%AD%A6/">考研数学到底怎么样才能上一百分？我来告诉你...</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">1.9k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">10分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->

<p>接下来我将以：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">n月份~<span class="number">6</span>月份</span><br><span class="line"></span><br><span class="line"><span class="number">7</span>月份~<span class="number">9</span>月份</span><br><span class="line"></span><br><span class="line">以及最后考试前两个月的时间段来描述具体如何备考</span><br></pre></td></tr></table></div></figure>


        <h1 id="6月份之前（基础阶段）："   >
          <a href="#6月份之前（基础阶段）：" class="heading-link"><i class="fas fa-link"></i></a><a href="#6月份之前（基础阶段）：" class="headerlink" title="6月份之前（基础阶段）："></a>6月份之前（基础阶段）：</h1>
      <p>这个时间段，是铁定的<strong>基础阶段</strong>，当然这个基础阶段是要打上引号的！所谓的基础阶段，<strong>并不是单纯地看本科阶段所学科目的书！而是从-&gt;本科书-&gt;到名师基础班的过渡。</strong></p>
<p>也就是说，这个阶段最重要的事情就是：打好基础！越牢越好，切忌好高骛远，埋头苦干。</p>
<p>我复习的时候，看的老师：</p>

        <h2 id="高等数学：汤家凤（基础阶段）"   >
          <a href="#高等数学：汤家凤（基础阶段）" class="heading-link"><i class="fas fa-link"></i></a><a href="#高等数学：汤家凤（基础阶段）" class="headerlink" title="高等数学：汤家凤（基础阶段）"></a>高等数学：汤家凤（基础阶段）</h2>
      
        <h2 id="线性代数：李永乐"   >
          <a href="#线性代数：李永乐" class="heading-link"><i class="fas fa-link"></i></a><a href="#线性代数：李永乐" class="headerlink" title="线性代数：李永乐"></a>线性代数：李永乐</h2>
      <p><strong>基础阶段</strong>我建议，先看高等数学、线性代数的书，入门知识过一遍。能够掌握做<strong>课后习题</strong>的方法即可！不要做太难的题。</p>
<p>再看完高等数学、线性代数的书后，可以开始进入真正的<strong>考研数学基础班</strong>了。</p>
<p>还是建议<strong>数学汤家凤</strong>基础阶段紧跟！</p>
<p>值得一提的是，我非常建议</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">买汤家凤老师的《接力题集<span class="number">1800</span>》</span><br><span class="line"></span><br><span class="line">汤家凤老师的高等数学讲义</span><br><span class="line"></span><br><span class="line">关注汤家凤老师的微信、微博（关注寒暑假等假期的的直播课程）</span><br></pre></td></tr></table></div></figure>
<p><strong>对的，必买！！！</strong></p>
<p>汤老师在课程中，会讲数学一、数学二、数学三的公共部分！</p>
<p>对于<strong>数学科目的独属部分以及题集的部分讲解</strong>，会在公众号以直播的形式播出！</p>
<p><img   src="https://img-blog.csdnimg.cn/20210409165805541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>给出自己基础阶段的复习方法：</strong></p>
<p><strong>高等数学跟汤家凤老师，线性代数跟李永乐老师即可。</strong></p>
<p>☆ 第一、看对应的汤老师视频课程，但不要看多了，建议是看数集视频（看自己的状态）然后立马投入到1800题集的题海中！</p>
<p>过完一章后，最好是看看这一章学到了什么？可不可以以笔记的形式过一遍。</p>
<p>☆ 第二、《接力题集1800》，一定要<strong>关注、标黑错题</strong>。错题是很有价值的，到底自己是错在哪里？</p>
<p>详细看看答案，为什么汤老师要这么写？</p>
<p>如果不知道，<strong>那么，看了答案后，下次是否能够同步汤老师的思维！</strong> 看到该类型的题，就要想起：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">这个题是涵盖哪些章节的知识（真正的考题都是综合题）</span><br><span class="line"></span><br><span class="line">解该题的基本方法是什么？</span><br><span class="line"></span><br><span class="line">在计算的过程：字迹工整！！思路清晰（对，恨不得给出注释那种）</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>


<p><img   src="https://img-blog.csdnimg.cn/20210409160908307.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br>为数不多还遗留下来的笔记了！</p>
<p>这个阶段不是很困难，但是一定要养成基本的解题素养！要知道常见的题型，以及常见的解法！</p>
<p>长时间的 <strong>Deliberate Practice（刻意练习）</strong> 即可！重复重复再重复。</p>
<p>第三、线性代数我想特别说明：</p>
<p>由于线性代数的抽象性！导致我们看了老师的课程内容 != 我们会做对应的题目，</p>
<p>这个时候我们要<strong>反复地看书、经典的例题</strong>！！！</p>
<ul>
<li>重难点绝对是：<strong>向量，方程组以及特征值、特征方程</strong>~（大题就是这么来的）</li>
</ul>

        <h1 id="7-8月份-9月份（强化阶段）："   >
          <a href="#7-8月份-9月份（强化阶段）：" class="heading-link"><i class="fas fa-link"></i></a><a href="#7-8月份-9月份（强化阶段）：" class="headerlink" title="7/8月份~9月份（强化阶段）："></a>7/8月份~9月份（强化阶段）：</h1>
      
        <h2 id="高等数学：汤老师的1800题集、武忠祥老师的系统强化课"   >
          <a href="#高等数学：汤老师的1800题集、武忠祥老师的系统强化课" class="heading-link"><i class="fas fa-link"></i></a><a href="#高等数学：汤老师的1800题集、武忠祥老师的系统强化课" class="headerlink" title="高等数学：汤老师的1800题集、武忠祥老师的系统强化课"></a>高等数学：汤老师的1800题集、武忠祥老师的系统强化课</h2>
      
        <h2 id="线性代数：李永乐老师的系统强化课"   >
          <a href="#线性代数：李永乐老师的系统强化课" class="heading-link"><i class="fas fa-link"></i></a><a href="#线性代数：李永乐老师的系统强化课" class="headerlink" title="线性代数：李永乐老师的系统强化课"></a>线性代数：李永乐老师的系统强化课</h2>
      <p><strong>这个阶段就是决定自己到底能不能在数学科目有所突破！有所成长的关键时候了。</strong></p>
<p>对，这个阶段要<strong>做大量的题，高难度的题，综合的题</strong></p>
<p>请注意！我这里说的难题，是指<strong>贴合考研数学考场难度的题目</strong></p>
<p>这个阶段我推荐：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">汤老师的 《接力题集<span class="number">1800</span>》强化篇 （除开基础篇即可）</span><br><span class="line"></span><br><span class="line">武忠祥老师的《高等数学辅导讲义》</span><br><span class="line"></span><br><span class="line">李永乐老师的《线性代数辅导讲义》</span><br><span class="line"></span><br><span class="line">武忠祥、李永乐老师（好像今年他们去到不同的机构）的<span class="number">330</span>重点题</span><br></pre></td></tr></table></div></figure>

<p><strong>☆ 强化班：听武忠祥老师的课程！！！</strong></p>
<p><strong>☆ 强化班：听线性代数，李永乐老师的课程！！</strong></p>
<p>其他阶段的课程我不建议反复听，但是：</p>
<p><strong>强化班的课程很有必要反复听！！！</strong></p>
<p>听课的同时，一定要加强自己计算的能力！速度，准确度！</p>
<p>强化班不是基础班，是真正要上战场的预备课！练习的题目也都是大量<strong>高于考场的题目</strong>，不要畏难！</p>
<p>这个阶段是绝对适合做高难度的题目的。</p>
<ul>
<li>同时！基础阶段的<strong>标黑题目、多次错误题目</strong>也不能落下他们，因为很有可能是因为自己的<strong>哪一部分的基础不扎实</strong>！</li>
</ul>
<p>很有必要在这个阶段提一嘴！所谓的多种方法，其实在考场上是不适用的。</p>
<p><strong>let’s put it another way，也就是说你会什么方法，就用什么方法解题。熟悉自己的解题方法，熟练自己的解题方法即可。</strong></p>

        <h1 id="10月份国庆-12月份（冲刺阶段）"   >
          <a href="#10月份国庆-12月份（冲刺阶段）" class="heading-link"><i class="fas fa-link"></i></a><a href="#10月份国庆-12月份（冲刺阶段）" class="headerlink" title="10月份国庆~12月份（冲刺阶段）"></a>10月份国庆~12月份（冲刺阶段）</h1>
      
        <h2 id="☆☆☆-汤老师的套题"   >
          <a href="#☆☆☆-汤老师的套题" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆☆☆-汤老师的套题" class="headerlink" title="☆☆☆ 汤老师的套题"></a>☆☆☆ 汤老师的套题</h2>
      
        <h2 id="☆☆☆☆-李永乐老师团队的套题"   >
          <a href="#☆☆☆☆-李永乐老师团队的套题" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆☆☆☆-李永乐老师团队的套题" class="headerlink" title="☆☆☆☆ 李永乐老师团队的套题"></a>☆☆☆☆ 李永乐老师团队的套题</h2>
      
        <h2 id="☆☆☆-张宇老师的闭关修炼"   >
          <a href="#☆☆☆-张宇老师的闭关修炼" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆☆☆-张宇老师的闭关修炼" class="headerlink" title="☆☆☆ 张宇老师的闭关修炼"></a>☆☆☆ 张宇老师的闭关修炼</h2>
      
        <h2 id="☆☆☆☆☆-李林老师的套题"   >
          <a href="#☆☆☆☆☆-李林老师的套题" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆☆☆☆☆-李林老师的套题" class="headerlink" title="☆☆☆☆☆ 李林老师的套题"></a>☆☆☆☆☆ 李林老师的套题</h2>
      <p>在大量方法的灌输下，<strong>国庆节之后</strong>，我们可以开始做套题了！</p>
<p>☆☆☆☆☆ 李林老师的四套卷、八套卷</p>
<p>☆☆☆ 汤老师的卷子（不做参考，因为部分题源是1800题集上的题目）</p>
<p>其他的卷子没有做过..不予评价</p>
<p><strong>请千万记住，不能按照自己做模块题目的思路去做题，一定要强迫自己在规定的时间2~2.5h内做完卷子！！</strong></p>
<p><strong>请千万记住，做卷子的目的不是，所有的题目都要做出来！而是拿到对于这张卷子，自己能拿到的分数！</strong></p>
<p>否则，<strong>只会懊悔自己，为什么自己的分数不如自己所愿！</strong></p>
<p>就像我的好研友李总说的那样，<strong>你上岸又不是一定要数学150分</strong>！</p>
<p>说的很好，每个人对数学的理解能力不同，<strong>要求自己做对能做对的题目（这点很重要）</strong></p>
<p>对于实在不会或者算不出来的题目，字迹要工整、思路要清晰<strong>，是老师给你评分，不是你自己的思路给你自己评分！</strong></p>
<p>一定要老师知道，你每一步的意义。<strong>老师也是</strong> <strong>按点给分，按步骤给分！</strong></p>
<p>同时，如果有条件。可以看看<strong>数学张宇老师的《闭关修炼》</strong>，为的是拓展自己的数学思维！</p>
<p>注意！越是临近考试，越不能放弃考研数学的本质！刷题。结合<strong>强化阶段的题目以及做套题的错题</strong></p>
<p><strong>考研数学真题&gt;模拟套题</strong></p>
<p>刷题最开始的阶段，请选择 <strong>x年到2010年</strong>，x为自己决定起点年份的卷子！</p>
<p>对于近年的真题卷子，一定要珍惜不能浪费！</p>
<ul>
<li>建议整理真题、部分精彩的模拟题的错题！反复阅读。</li>
</ul>
<p>那么，到了最后的冲刺阶段：</p>
<p>是一定要多看<strong>李林老师的《四套卷》、《六套卷》</strong></p>
<p><strong>By the way 直到考试前的早上！我还在看六套卷的选择题。结果你懂的</strong></p>
<p>上考场的具体答题顺序建议：<strong>高等数学、线性代数的顺序做题方式。</strong></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/05/Java%E6%8A%80%E5%B7%A7-Ajax%E8%AF%B7%E6%B1%82PostAndGet/">Ajax请求PostAndGet</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-05</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-06</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">705</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">5分</span></span></div></header><div class="post-body"><div class="post-excerpt">
        <h1 id="Ajax的Get与Post方法"   >
          <a href="#Ajax的Get与Post方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#Ajax的Get与Post方法" class="headerlink" title="Ajax的Get与Post方法"></a>Ajax的Get与Post方法</h1>
      <p><strong>请注意，必须引入JQuery</strong></p>
<p><strong>CDN代码如下：</strong></p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="Get方法"   >
          <a href="#Get方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#Get方法" class="headerlink" title="Get方法"></a>Get方法</h2>
      <p><strong>请注意GET方法一般用于从后台中获取数据，而不是提交数据</strong></p>
<p>默认是GET方法，速度很快。但是由于<strong>数据将直接以localhost:8080?data1=111&amp;data2=222</strong>的形式</p>
<p>出现在浏览器的地址栏中，</p>
<p><strong>因而Get方法一般不用于：敏感、隐私的数据传输</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> id = $(<span class="string">&quot;input[name=&#x27;editor&#x27;]&quot;</span>).val() </span><br><span class="line">$.ajax(&#123;	</span><br><span class="line">	<span class="comment">//后台的请求路径 一般在@Controller层中添加相关注解</span></span><br><span class="line">	<span class="comment">//注解一：@RequestMapping(value=&quot;/show_paper&quot;)或者指定@GetMapping(value=&quot;/show_paper&quot;)</span></span><br><span class="line">	<span class="attr">url</span>:<span class="string">&quot;show_paper&quot;</span>, </span><br><span class="line">	<span class="attr">data</span>:&#123;<span class="string">&quot;Id&quot;</span>:, id&#125;, </span><br><span class="line">	<span class="attr">type</span>:<span class="string">&quot;GET&quot;</span>,</span><br><span class="line">	<span class="comment">//注解二：由于指定返回类型为JSON数据</span></span><br><span class="line">	<span class="comment">//@ResponseBody</span></span><br><span class="line">	<span class="attr">dataType</span>:<span class="string">&quot;JSON&quot;</span>,</span><br><span class="line">	<span class="attr">success</span>:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123;</span><br><span class="line">		<span class="comment">//后台的回调函数中 result中可以找到 后台返回的JSON数据</span></span><br><span class="line">		<span class="built_in">console</span>.log(result);</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">error</span>:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		alert(<span class="string">&quot;抱歉，请求失败，请重新发出请求！&quot;</span>)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></div></figure>


        <h3 id="1-在SpringBoot中，-RestController-Controller-ResponseBody"   >
          <a href="#1-在SpringBoot中，-RestController-Controller-ResponseBody" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-在SpringBoot中，-RestController-Controller-ResponseBody" class="headerlink" title="1. 在SpringBoot中，@RestController=@Controller+@ResponseBody"></a>1. <strong>在SpringBoot中，@RestController=@Controller+@ResponseBody</strong></h3>
      
        <h3 id="2-使用Get方式请求时，后台SpringMVC用-RequestParam-“Id”-来获取"   >
          <a href="#2-使用Get方式请求时，后台SpringMVC用-RequestParam-“Id”-来获取" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-使用Get方式请求时，后台SpringMVC用-RequestParam-“Id”-来获取" class="headerlink" title="2. 使用Get方式请求时，后台SpringMVC用@RequestParam(“Id”)来获取"></a>2. <strong>使用Get方式请求时，后台SpringMVC用@RequestParam(“Id”)来获取</strong></h3>
      
        <h2 id="Post方法"   >
          <a href="#Post方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#Post方法" class="headerlink" title="Post方法"></a>Post方法</h2>
      <p>与Get方法不同的是，<strong>Post方法一般用于向服务器提交数据。而不是获取数据！</strong></p>
<p>因此，我们可以将<strong>需要隐私处理的数据以POST方式以服务器交互：比如账户密码，业务逻辑数据等等</strong></p>

        <h3 id="1-网页中没有form标签"   >
          <a href="#1-网页中没有form标签" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-网页中没有form标签" class="headerlink" title="1. 网页中没有form标签"></a>1. 网页中没有form标签</h3>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> username = $(<span class="string">&quot;input[name=&#x27;username&#x27;]&quot;</span>).val() </span><br><span class="line"><span class="keyword">var</span> password = $(<span class="string">&quot;input[name=&#x27;password&#x27;]&quot;</span>).val() </span><br><span class="line">      $.ajax(&#123;</span><br><span class="line">	<span class="comment">//对应的Controller 指定登录</span></span><br><span class="line">          <span class="attr">url</span>:<span class="string">&quot;login&quot;</span>,</span><br><span class="line">	<span class="comment">//字符串拼接的方式添加参数 后台可用MVC捕捉 或创建Bean对象</span></span><br><span class="line">          <span class="attr">data</span>:&#123;<span class="string">&quot;username&quot;</span>:username , <span class="string">&quot;password&quot;</span>:password&#125;, </span><br><span class="line">          <span class="attr">type</span>:<span class="string">&quot;POST&quot;</span>,<span class="comment">//HTTP请求方式</span></span><br><span class="line">          <span class="attr">dataType</span>:<span class="string">&quot;JSON&quot;</span>,<span class="comment">//返回值的类型。</span></span><br><span class="line">          <span class="attr">success</span>:<span class="function"><span class="keyword">function</span>(<span class="params">result</span>)</span>&#123; <span class="comment">//请求事件成功的回调函数</span></span><br><span class="line">              <span class="built_in">console</span>.log(<span class="string">&quot;JSON:&quot;</span>+result);</span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="attr">error</span>:<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;<span class="comment">//处理页面出错以后执行的函数</span></span><br><span class="line">              <span class="built_in">console</span>.log(data);</span><br><span class="line">              <span class="built_in">window</span>.location.replace(<span class="string">&quot;./index.jsp&quot;</span>);</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;);</span><br></pre></td></tr></table></div></figure>


        <h4 id="1-后台函数参数中可以使用与前端同名的变量"   >
          <a href="#1-后台函数参数中可以使用与前端同名的变量" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-后台函数参数中可以使用与前端同名的变量" class="headerlink" title="1. 后台函数参数中可以使用与前端同名的变量"></a>1. 后台函数参数中可以使用与前端同名的变量</h4>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fun</span><span class="params">(String username, String password)</span></span></span><br></pre></td></tr></table></div></figure>


        <h4 id="2-后台可以使用Bean对象-User类-其中属性与前端参数同名"   >
          <a href="#2-后台可以使用Bean对象-User类-其中属性与前端参数同名" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-后台可以使用Bean对象-User类-其中属性与前端参数同名" class="headerlink" title="2. 后台可以使用Bean对象 User类 其中属性与前端参数同名"></a>2. 后台可以使用Bean对象 User类 其中属性与前端参数同名</h4>
      <p><strong>UserController.java</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fun</span><span class="params">(User user)</span></span></span><br></pre></td></tr></table></div></figure>

<p><strong>User.java</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</span><br><span class="line">	<span class="keyword">private</span> Integer id;</span><br><span class="line">	<span class="keyword">private</span> String username;</span><br><span class="line">	pruvate String password;</span><br><span class="line">	</span><br><span class="line">	...省略GET、SET方法</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h3 id="2-网页中有form标签（更便捷）"   >
          <a href="#2-网页中有form标签（更便捷）" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-网页中有form标签（更便捷）" class="headerlink" title="2.网页中有form标签（更便捷）"></a>2.网页中有form标签（更便捷）</h3>
      <p><strong>关键代码</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">data:$(<span class="string">&quot;#form&quot;</span>).serialize(),</span><br></pre></td></tr></table></div></figure>

<p>解释：</p>
<ol>
<li><p>给网页中的<strong>form表单一个id=”form”</strong></p>
</li>
<li><p>在进行AJAX请求时 找到这个表单</p>
</li>
<li><p><strong>对这个表单中的数据进行序列化serialize()</strong></p>
</li>
</ol>
<p><strong>注意：后台用对象User来接收，并且前端name中的值需要与Bean对象User中的private属性一一对应</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">        <span class="attr">url</span>:<span class="string">&quot;addUser&quot;</span>,</span><br><span class="line">        <span class="attr">type</span>:<span class="string">&quot;POST&quot;</span>,</span><br><span class="line">        <span class="attr">data</span>:$(<span class="string">&quot;#form&quot;</span>).serialize(),</span><br><span class="line">        <span class="attr">success</span>:<span class="function"><span class="keyword">function</span> (<span class="params">result</span>) </span>&#123;</span><br><span class="line">            showData(result);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></div></figure>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/01/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-3/">VUE学习笔记-3-SpringBoot+SpringJPA+Vue 开发实战</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-01</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-16</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">2.4k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">20分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="原生VUE实战（查询数据）（含SpringBoot-Vue）"   >
          <a href="#原生VUE实战（查询数据）（含SpringBoot-Vue）" class="heading-link"><i class="fas fa-link"></i></a><a href="#原生VUE实战（查询数据）（含SpringBoot-Vue）" class="headerlink" title="原生VUE实战（查询数据）（含SpringBoot+Vue）"></a>原生VUE实战（查询数据）（含SpringBoot+Vue）</h1>
      
        <h2 id="1-创建VUE项目"   >
          <a href="#1-创建VUE项目" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-创建VUE项目" class="headerlink" title="1.创建VUE项目"></a>1.创建VUE项目</h2>
      <p><strong>在命令行中输入</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue ui</span><br></pre></td></tr></table></div></figure>
<p><img   src="https://img-blog.csdnimg.cn/20210401092413748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="2-进入dashboard中-创建项目"   >
          <a href="#2-进入dashboard中-创建项目" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-进入dashboard中-创建项目" class="headerlink" title="2.进入dashboard中 创建项目"></a>2.进入dashboard中 创建项目</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210401092523236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="3-进入VUE-工程管家创建工程"   >
          <a href="#3-进入VUE-工程管家创建工程" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-进入VUE-工程管家创建工程" class="headerlink" title="3.进入VUE 工程管家创建工程"></a>3.进入VUE 工程管家创建工程</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210401092946618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>修改以下参数</strong><br><img src="https://img-blog.csdnimg.cn/20210401093021644.png" alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210401093044712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/20210401093103753.png" alt="在这里插入图片描述"><br>创建完之后就可以了。</p>

        <h2 id="4-从IDEA中导入项目编写前端代码"   >
          <a href="#4-从IDEA中导入项目编写前端代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-从IDEA中导入项目编写前端代码" class="headerlink" title="4.从IDEA中导入项目编写前端代码"></a>4.从IDEA中导入项目编写前端代码</h2>
      <p>打开IDEA-&gt;导入项目….</p>
<ol>
<li>安装Vue.js插件</li>
<li>修改JavaScript语言为<strong>ECMAScript 6</strong></li>
<li>在控制台中输入<strong>npm run serve</strong>来启动项目</li>
</ol>
<h1 id=""><a href="#" class="headerlink" title="*******************"></a>*******************</h1>
        <h1 id="（开发从这里开始）VUE前端项目的结构图"   >
          <a href="#（开发从这里开始）VUE前端项目的结构图" class="heading-link"><i class="fas fa-link"></i></a><a href="#（开发从这里开始）VUE前端项目的结构图" class="headerlink" title="（开发从这里开始）VUE前端项目的结构图"></a>（开发从这里开始）VUE前端项目的结构图</h1>
      <p>项目结构图如图所示：<br><img   src="https://img-blog.csdnimg.cn/20210401093525334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br>通过结构图我们可以知道：</p>
<ul>
<li>App.vue 是网页的主界面，页面中包括许多<strong>组件 component</strong></li>
<li>其中Home、About都是导航栏，但注意<strong>我们导航至Home与About并不代表像传统意义那样，我们去打开一个新的页面。</strong>而是说，<strong>我们在页面上加载不同来源的内容</strong></li>
</ul>
<p>具体含义，如图所示：</p>
<p> <img   src="https://img-blog.csdnimg.cn/20210401094008692.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> |</span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>在上述代码中，我们可以看出<strong>router-link标签负责导航栏 to表示导航路径</strong><br>而具体的<strong>路径配置</strong>是交给项目结构中的<br><strong>router下的index.js来配置</strong></p>
<p><strong>index.js中的关键代码如图</strong><br><img src="https://img-blog.csdnimg.cn/20210401094243603.png" alt="在这里插入图片描述"><br><strong>import代表从那个vue页面中导入相关组件</strong></p>
<p>而在routes中具体配置相应的<strong>路径，名字，以及组件的名字</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210401094402953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol>
<li>这里的path需要<strong>与前端页面vue中router-link中的to属性参数一一对应</strong></li>
<li>name可以不填写，但最好与组件名一致</li>
<li>component代表组件 <strong>这里的component需要与import导入语句后面一致</strong></li>
</ol>
<p><strong>而对于VUE3.0，我们建立导航可以用新的写法：</strong></p>
<p>import语句可以省略，除了写<strong>path与name</strong>参数之外，<br>我们的<strong>component参数</strong>可以变成：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">component:<span class="function">()=&gt;</span><span class="keyword">import</span>(<span class="string">&#x27;../views/About.vue)</span></span><br></pre></td></tr></table></div></figure>


        <h1 id="创建SpringBoot项目"   >
          <a href="#创建SpringBoot项目" class="heading-link"><i class="fas fa-link"></i></a><a href="#创建SpringBoot项目" class="headerlink" title="创建SpringBoot项目"></a>创建SpringBoot项目</h1>
      <p>添加以下依赖：<br><img   src="https://img-blog.csdnimg.cn/20210401095150394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210401095205169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210401095231868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><strong>1. Lombok<br>2. Spring Web<br>3. Spring Data JPA<br>4. MySQL Driver</strong></p>
<p>以上四个依赖</p>
<p>1.资源文件中添加数据库文件连接信息：</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">spring:</span></span><br><span class="line">  <span class="attr">datasource:</span></span><br><span class="line">    <span class="attr">url:</span> <span class="string">jdbc:mysql://localhost:3306/vuetest?characterEncoding=utf-8&amp;serverTimezone=GMT%2B8</span></span><br><span class="line">    <span class="attr">username:</span> <span class="string">root</span></span><br><span class="line">    <span class="attr">password:</span> <span class="number">123456</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">jpa:</span></span><br><span class="line">    <span class="attr">show-sql:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">properties:</span></span><br><span class="line">      <span class="attr">hibernate:</span></span><br><span class="line">        <span class="string">format_sql:true</span></span><br><span class="line"><span class="attr">server:</span></span><br><span class="line">  <span class="attr">port:</span> <span class="number">8181</span></span><br></pre></td></tr></table></div></figure>

<ol>
<li>连接数据库信息</li>
<li>JPA打印SQL 格式化SQL</li>
<li>端口8181 避免占用（vue的端口与后台的端口占用）</li>
</ol>

        <h1 id="建立实体类"   >
          <a href="#建立实体类" class="heading-link"><i class="fas fa-link"></i></a><a href="#建立实体类" class="headerlink" title="建立实体类"></a>建立实体类</h1>
      
        <h2 id="User类（注意使用-Entity-Data注解-Id放在主键属性上）"   >
          <a href="#User类（注意使用-Entity-Data注解-Id放在主键属性上）" class="heading-link"><i class="fas fa-link"></i></a><a href="#User类（注意使用-Entity-Data注解-Id放在主键属性上）" class="headerlink" title="User类（注意使用@Entity @Data注解 @Id放在主键属性上）"></a>User类（注意使用@Entity @Data注解 @Id放在主键属性上）</h2>
      <p><strong>值得注意的是，类中的每个属性，在首字母小写后-必须等于数据库表中的字段名</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> lombok.Data;</span><br><span class="line"><span class="keyword">import</span> javax.persistence.Entity;</span><br><span class="line"><span class="keyword">import</span> javax.persistence.Id;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Entity</span></span><br><span class="line"><span class="meta">@Data</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">User</span> </span>&#123;</span><br><span class="line">    <span class="comment">//默认是类名首字母小写 与数据库中的表进行对应</span></span><br><span class="line"></span><br><span class="line">    <span class="meta">@Id</span></span><br><span class="line">    <span class="keyword">private</span> Integer id;</span><br><span class="line">    <span class="keyword">private</span> String username;</span><br><span class="line">    <span class="keyword">private</span> String password;</span><br><span class="line">    <span class="keyword">private</span> String email;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h2 id="ApiResponse-后端前台通用-交互类"   >
          <a href="#ApiResponse-后端前台通用-交互类" class="heading-link"><i class="fas fa-link"></i></a><a href="#ApiResponse-后端前台通用-交互类" class="headerlink" title="ApiResponse 后端前台通用-交互类"></a>ApiResponse 后端前台通用-交互类</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> lombok.Data;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Data</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ApiResponse</span></span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">int</span> code;</span><br><span class="line">    <span class="keyword">private</span> String message;</span><br><span class="line">    <span class="keyword">private</span> Object data;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCode</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> code;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCode</span><span class="params">(<span class="keyword">int</span> code)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.code = code;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getMessage</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> message;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setMessage</span><span class="params">(String message)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.message = message;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> Object <span class="title">getData</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> data;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setData</span><span class="params">(Object data)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.data = data;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>


        <h1 id="建立Repository层或称DAO层"   >
          <a href="#建立Repository层或称DAO层" class="heading-link"><i class="fas fa-link"></i></a><a href="#建立Repository层或称DAO层" class="headerlink" title="建立Repository层或称DAO层"></a>建立Repository层或称DAO层</h1>
      
        <h2 id="UserRepository类-extends-JpaRepository-lt-User-Integer-gt"   >
          <a href="#UserRepository类-extends-JpaRepository-lt-User-Integer-gt" class="heading-link"><i class="fas fa-link"></i></a><a href="#UserRepository类-extends-JpaRepository-lt-User-Integer-gt" class="headerlink" title="UserRepository类 extends JpaRepository&lt;User, Integer&gt;"></a>UserRepository类 extends JpaRepository&lt;User, Integer&gt;</h2>
      <p><strong>（其中User是对应的类 Integer是主键）利用这种方法，可以避免写一些比如1.查询一条数据2.查询全部数据3.根据主键查询数据…</strong><br><strong>已经封装好了 常见的DAO层操作</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.example.demo.entity.User;</span><br><span class="line"><span class="keyword">import</span> org.springframework.data.jpa.repository.JpaRepository;</span><br><span class="line"></span><br><span class="line"><span class="comment">//继承已经封装好了的 JPA不用自己去写简单的 增删改查接口</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">UserRepositery</span> <span class="keyword">extends</span> <span class="title">JpaRepository</span>&lt;<span class="title">User</span>, <span class="title">Integer</span>&gt; </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h2 id="建立RepositoryTest测试类-先看看能不能获得到数据库的数据！"   >
          <a href="#建立RepositoryTest测试类-先看看能不能获得到数据库的数据！" class="heading-link"><i class="fas fa-link"></i></a><a href="#建立RepositoryTest测试类-先看看能不能获得到数据库的数据！" class="headerlink" title="建立RepositoryTest测试类 先看看能不能获得到数据库的数据！"></a>建立RepositoryTest测试类 先看看能不能获得到数据库的数据！</h2>
      <ol>
<li>在类名上右键</li>
<li>Goto中选择test<br> <img   src="https://img-blog.csdnimg.cn/20210401145910741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></li>
<li>命名UserRepositeryTest<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> org.junit.jupiter.api.Test;</span><br><span class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</span><br><span class="line"><span class="keyword">import</span> org.springframework.boot.test.context.SpringBootTest;</span><br><span class="line"></span><br><span class="line"><span class="meta">@SpringBootTest</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserRepositeryTest</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Autowired</span></span><br><span class="line">    <span class="keyword">private</span> UserRepositery userRepositery;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Test</span></span><br><span class="line">    <span class="function"><span class="keyword">void</span> <span class="title">findAll</span><span class="params">()</span></span>&#123;</span><br><span class="line">        System.out.println(userRepositery.findAll());</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure></li>
<li>点击函数名左边的运行！测试看控制台能否读取数据库数据。</li>
</ol>

        <h1 id="建立Service层以及对应的Impl实现类"   >
          <a href="#建立Service层以及对应的Impl实现类" class="heading-link"><i class="fas fa-link"></i></a><a href="#建立Service层以及对应的Impl实现类" class="headerlink" title="建立Service层以及对应的Impl实现类"></a>建立Service层以及对应的Impl实现类</h1>
      <p><strong>值得注意的是 注解@Service应加在实现类上</strong></p>

        <h2 id="UserService接口"   >
          <a href="#UserService接口" class="heading-link"><i class="fas fa-link"></i></a><a href="#UserService接口" class="headerlink" title="UserService接口"></a>UserService接口</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> com.example.demo.entity.User;</span><br><span class="line"><span class="keyword">import</span> org.springframework.stereotype.Service;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">UserService</span> </span>&#123;</span><br><span class="line">    <span class="function">List&lt;User&gt; <span class="title">showAllTheUsers</span><span class="params">()</span></span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>


        <h2 id="UserServiceImpl实现类"   >
          <a href="#UserServiceImpl实现类" class="heading-link"><i class="fas fa-link"></i></a><a href="#UserServiceImpl实现类" class="headerlink" title="UserServiceImpl实现类"></a>UserServiceImpl实现类</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> com.example.demo.entity.User;</span><br><span class="line"><span class="keyword">import</span> com.example.demo.repository.UserRepositery;</span><br><span class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</span><br><span class="line"><span class="keyword">import</span> org.springframework.stereotype.Service;</span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Service</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">UserServiceImpl</span> <span class="keyword">implements</span> <span class="title">UserService</span> </span>&#123;</span><br><span class="line">    <span class="meta">@Autowired</span></span><br><span class="line">    <span class="keyword">private</span> UserRepositery userRepositery;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> List&lt;User&gt; <span class="title">showAllTheUsers</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> userRepositery.findAll();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h1 id="建立Controller层"   >
          <a href="#建立Controller层" class="heading-link"><i class="fas fa-link"></i></a><a href="#建立Controller层" class="headerlink" title="建立Controller层"></a>建立Controller层</h1>
      
        <h2 id="UserController"   >
          <a href="#UserController" class="heading-link"><i class="fas fa-link"></i></a><a href="#UserController" class="headerlink" title="UserController"></a>UserController</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> com.example.demo.entity.ApiResponse;</span><br><span class="line"><span class="keyword">import</span> com.example.demo.entity.User;</span><br><span class="line"><span class="keyword">import</span> com.example.demo.service.UserService;</span><br><span class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.GetMapping;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.RequestMapping;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.RestController;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="meta">@RestController</span></span><br><span class="line"><span class="meta">@RequestMapping(value = &quot;/user&quot;)</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">UserController</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Autowired</span></span><br><span class="line">    <span class="keyword">private</span> UserService userService;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@GetMapping(&quot;/show&quot;)</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> ApiResponse <span class="title">showAll</span><span class="params">()</span></span>&#123;</span><br><span class="line">        ApiResponse apiResponse = <span class="keyword">new</span> ApiResponse();</span><br><span class="line">        List&lt;User&gt; users = userService.showAllTheUsers();</span><br><span class="line">        apiResponse.setData(users);</span><br><span class="line">        apiResponse.setMessage(<span class="string">&quot;返回成功！&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> apiResponse;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p><strong>值得注意的是：@RestController = @Controller + @ResponseBody</strong>后台从数据库中查询到的数据<br>以XML或者JSON的格式，返回给前端。</p>

        <h1 id="解决端口跨域的问题"   >
          <a href="#解决端口跨域的问题" class="heading-link"><i class="fas fa-link"></i></a><a href="#解决端口跨域的问题" class="headerlink" title="解决端口跨域的问题"></a>解决端口跨域的问题</h1>
      <p><strong>由于我们修改了SPRINGBOOT的端口为8181 而VUE默认是8080</strong>因此，我们需要对SpringBoot做一个配置！</p>

        <h2 id="新建config-CorsConfig类"   >
          <a href="#新建config-CorsConfig类" class="heading-link"><i class="fas fa-link"></i></a><a href="#新建config-CorsConfig类" class="headerlink" title="新建config.CorsConfig类"></a>新建config.CorsConfig类</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> org.springframework.context.annotation.Bean;</span><br><span class="line"><span class="keyword">import</span> org.springframework.context.annotation.Configuration;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.cors.CorsConfiguration;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.cors.UrlBasedCorsConfigurationSource;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.filter.CorsFilter;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.servlet.config.annotation.CorsRegistry;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.servlet.config.annotation.WebMvcConfigurer;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Configuration</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CorsConfig</span> <span class="keyword">implements</span> <span class="title">WebMvcConfigurer</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Bean</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> CorsFilter <span class="title">corsFilter</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        UrlBasedCorsConfigurationSource source = <span class="keyword">new</span> UrlBasedCorsConfigurationSource();</span><br><span class="line">        CorsConfiguration config = <span class="keyword">new</span> CorsConfiguration();</span><br><span class="line">        config.addAllowedOriginPattern(<span class="string">&quot;*&quot;</span>);</span><br><span class="line">        config.setAllowCredentials(<span class="keyword">true</span>);</span><br><span class="line">        <span class="comment">// 允许服务端访问的客户端请求头</span></span><br><span class="line">        config.addAllowedHeader(<span class="string">&quot;*&quot;</span>);</span><br><span class="line">        <span class="comment">// 允许访问的方法名,GET POST等</span></span><br><span class="line">        config.addAllowedMethod(<span class="string">&quot;*&quot;</span>);</span><br><span class="line">        <span class="comment">// 对接口配置跨域设置</span></span><br><span class="line">        source.registerCorsConfiguration(<span class="string">&quot;/**&quot;</span> , config);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> CorsFilter(source);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p>到此为止，后台的代码基本算是完成了！<br>接下来开始编写</p>

        <h1 id="-1"   >
          <a href="#-1" class="heading-link"><i class="fas fa-link"></i></a><a href="#-1" class="headerlink" title="*******************"></a>*******************</h1>
      
        <h1 id="前端代码开始-User导航栏"   >
          <a href="#前端代码开始-User导航栏" class="heading-link"><i class="fas fa-link"></i></a><a href="#前端代码开始-User导航栏" class="headerlink" title="(前端代码开始)User导航栏"></a>(前端代码开始)User导航栏</h1>
      <p><strong>修改App.vue文件中的template标签为</strong></p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> |</span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span>|</span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">&quot;/user&quot;</span>&gt;</span>User<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>同时在router文件夹中的index.js文件中 配置router导航映射</strong>（见文章前部分内容！）</p>
<p><strong>第一种方式：适用于VUE2（显式声明）</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">&#x27;../views/User.vue&#x27;</span> <span class="comment">//建立VUE页面与组件的映射</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: Home</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;About&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: About  </span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/user&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;User&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: User <span class="comment">//从上方的import User中建立映射</span></span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></div></figure>

<p><strong>第二种方式：建立隐式映射</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注释掉上方的import User from &#x27;../views/User.vue&#x27; </span></span><br><span class="line"></span><br><span class="line"><span class="comment">//但是下方变成：</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/user&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;User&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">()=&gt;</span><span class="keyword">import</span>(<span class="string">&#x27;../views/User.vue&#x27;</span>) <span class="comment">//边声明组件 边建立映射</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></div></figure>


        <h1 id="创建User-vue-具体显示内容"   >
          <a href="#创建User-vue-具体显示内容" class="heading-link"><i class="fas fa-link"></i></a><a href="#创建User-vue-具体显示内容" class="headerlink" title="创建User.vue 具体显示内容"></a>创建User.vue 具体显示内容</h1>
      <p>在views文件夹下创建User.vue文件：</p>

        <h2 id="Style-CSS样式"   >
          <a href="#Style-CSS样式" class="heading-link"><i class="fas fa-link"></i></a><a href="#Style-CSS样式" class="headerlink" title="Style CSS样式"></a>Style CSS样式</h2>
      <figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;style scoped&gt;</span><br><span class="line">    <span class="selector-tag">table</span>&#123;</span><br><span class="line">        <span class="attribute">font-size</span>:<span class="number">25px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">table</span>&#123;</span><br><span class="line">        <span class="attribute">table-layout</span>:fixed;</span><br><span class="line">        <span class="attribute">empty-cells</span>:show;</span><br><span class="line">        <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">        <span class="attribute">margin</span>:<span class="number">0</span> auto;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">td</span>&#123;</span><br><span class="line">        <span class="attribute">height</span>:<span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="JavaScript-利用axios与后台交互"   >
          <a href="#JavaScript-利用axios与后台交互" class="heading-link"><i class="fas fa-link"></i></a><a href="#JavaScript-利用axios与后台交互" class="headerlink" title="JavaScript 利用axios与后台交互"></a>JavaScript 利用axios与后台交互</h2>
      
        <h3 id="第一步、添加axios插件（并修改一些内容）"   >
          <a href="#第一步、添加axios插件（并修改一些内容）" class="heading-link"><i class="fas fa-link"></i></a><a href="#第一步、添加axios插件（并修改一些内容）" class="headerlink" title="第一步、添加axios插件（并修改一些内容）"></a>第一步、添加axios插件（并修改一些内容）</h3>
      <p><strong>首先，在命令行中输入</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue add axios</span><br></pre></td></tr></table></div></figure>

<p>然后找到<strong>项目结构图中的plugins文件夹下面的axios.js</strong><br>粘贴以下代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;axios&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Full config:  https://github.com/axios/axios#request-config</span></span><br><span class="line"><span class="comment">// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || &#x27;&#x27;;</span></span><br><span class="line"><span class="comment">// axios.defaults.headers.common[&#x27;Authorization&#x27;] = AUTH_TOKEN;</span></span><br><span class="line"><span class="comment">// axios.defaults.headers.post[&#x27;Content-Type&#x27;] = &#x27;application/x-www-form-urlencoded&#x27;;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> config = &#123;</span><br><span class="line">  <span class="comment">// baseURL: process.env.baseURL || process.env.apiUrl || &quot;&quot;</span></span><br><span class="line">  <span class="comment">// timeout: 60 * 1000, // Timeout</span></span><br><span class="line">  <span class="comment">// withCredentials: true, // Check cross-site Access-Control</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> _axios = axios.create(config);</span><br><span class="line"></span><br><span class="line">_axios.interceptors.request.use(</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">config</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Do something before request is sent</span></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Do something with request error</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Add a response interceptor</span></span><br><span class="line">_axios.interceptors.response.use(</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">response</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Do something with response data</span></span><br><span class="line">    <span class="keyword">return</span> response;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Do something with response error</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> _axios</span><br></pre></td></tr></table></div></figure>


        <h2 id="第二步、引用axios并发起get请求"   >
          <a href="#第二步、引用axios并发起get请求" class="heading-link"><i class="fas fa-link"></i></a><a href="#第二步、引用axios并发起get请求" class="headerlink" title="第二步、引用axios并发起get请求"></a>第二步、引用axios并发起get请求</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&quot;../plugins/axios&quot;</span>; <span class="comment">//引用axios </span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;User&quot;</span>,</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="comment">// 具体的变量</span></span><br><span class="line">                <span class="attr">msg</span>: <span class="string">&#x27;Hello, Vue!&#x27;</span>,</span><br><span class="line">                <span class="attr">users</span>:[]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="title">created</span>(<span class="params"></span>)</span>&#123;  <span class="comment">//当网页准备就绪时</span></span><br><span class="line">            <span class="keyword">const</span> _data = <span class="built_in">this</span> <span class="comment">//利用这个this好使得在回调函数中 调用回调函数外的data中的数据</span></span><br><span class="line">            axios(<span class="string">&#x27;http://localhost:8181/user/show&#x27;</span>).then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</span><br><span class="line">                _data.users = response.data.data <span class="comment">//将controller返回给后台的data 赋给data中的数组</span></span><br><span class="line">            &#125;) <span class="comment">//跟ajax一样 直接请求8181端口下的请求路径 注意 已经配置了跨域！不用担心</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="第三步、将数据显示在网页中"   >
          <a href="#第三步、将数据显示在网页中" class="heading-link"><i class="fas fa-link"></i></a><a href="#第三步、将数据显示在网页中" class="headerlink" title="第三步、将数据显示在网页中"></a>第三步、将数据显示在网页中</h2>
      
        <h2 id="template-HTML内容"   >
          <a href="#template-HTML内容" class="heading-link"><i class="fas fa-link"></i></a><a href="#template-HTML内容" class="headerlink" title="template HTML内容"></a>template HTML内容</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--template中写html代码 且只能有一个根div节点--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>id<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>用户名<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>密码<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span>&gt;</span>邮箱<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">&quot;user of users&quot;</span>&gt;</span> </span><br><span class="line">            <span class="comment">&lt;!--利用for循环 加载data中users数组中数据--&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span> &gt;</span>&#123;&#123;user.id&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span> &gt;</span>&#123;&#123;user.username&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span> &gt;</span>&#123;&#123;user.password&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">td</span> &gt;</span>&#123;&#123;user.email&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>到此为止。一个简单的<strong>查询数据库所有数据的请求就完成了</strong></p>
<p>项目效果图如下：<br><img   src="https://img-blog.csdnimg.cn/2021040115270020.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/28/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-1/">VUE学习笔记-基础语法及相应应用-1-基本语法</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-28</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-12</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">9k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">76分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->
 
# Vue开头好戏-小案例
## Hello World
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Hello World<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;Hello World&lt;/div&gt;&#x27;</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="面向数据编程-gt-实现计时器"   >
          <a href="#面向数据编程-gt-实现计时器" class="heading-link"><i class="fas fa-link"></i></a><a href="#面向数据编程-gt-实现计时器" class="headerlink" title="面向数据编程-&gt;实现计时器"></a>面向数据编程-&gt;实现计时器</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>计数器<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">counter</span>:<span class="number">1</span> </span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;, <span class="comment">//需要一个mounted方法 自动执行</span></span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>&#123; <span class="comment">//页面渲染完 就自动执行</span></span></span><br><span class="line"><span class="javascript">            <span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.$data.counter += <span class="number">1</span></span></span><br><span class="line"><span class="javascript">            &#125;, <span class="number">1000</span>) <span class="comment">//周期执行</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&#x27;&lt;div&gt;&#123;&#123;counter&#125;&#125;&lt;/div&gt;&#x27;</span> <span class="comment">//字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h3 id="mounted-表示当文档加载时-就执行该函数"   >
          <a href="#mounted-表示当文档加载时-就执行该函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#mounted-表示当文档加载时-就执行该函数" class="headerlink" title="mounted()表示当文档加载时 就执行该函数"></a>mounted()表示当文档加载时 就执行该函数</h3>
      
        <h3 id="data-中存放类似-全局数据"   >
          <a href="#data-中存放类似-全局数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#data-中存放类似-全局数据" class="headerlink" title="data(){}中存放类似 全局数据"></a>data(){}中存放类似 全局数据</h3>
      
        <h3 id="template-放入全局数据-取值"   >
          <a href="#template-放入全局数据-取值" class="heading-link"><i class="fas fa-link"></i></a><a href="#template-放入全局数据-取值" class="headerlink" title="template:放入全局数据 取值"></a>template:放入全局数据 取值</h3>
      
        <h2 id="绑定数据-amp-事件-gt-编写方法"   >
          <a href="#绑定数据-amp-事件-gt-编写方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#绑定数据-amp-事件-gt-编写方法" class="headerlink" title="绑定数据&amp;事件-&gt;编写方法"></a>绑定数据&amp;事件-&gt;编写方法</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>象牙山洗脚城<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">content</span>:<span class="string">&quot;&quot;</span>, </span></span><br><span class="line"><span class="javascript">                <span class="attr">num</span>:<span class="number">0</span>, </span></span><br><span class="line"><span class="javascript">                <span class="attr">Menu</span>:<span class="string">&#x27;真空套餐 帝王套餐 夏日套餐 学生套餐&#x27;</span>,</span></span><br><span class="line"><span class="javascript">                <span class="attr">isShowMenu</span>: <span class="literal">false</span> <span class="comment">//标志不展示</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>:&#123;</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">welcomeBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.content = <span class="string">&quot;欢迎光临, 贵宾&quot;</span> + ++<span class="built_in">this</span>.num + <span class="string">&quot;位&quot;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">byeBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="keyword">if</span>(<span class="built_in">parseInt</span>(<span class="built_in">this</span>.num) == <span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="javascript">                    alert(<span class="string">&quot;操作有误，无人可离.&quot;</span>)</span></span><br><span class="line"><span class="javascript">                    <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">                &#125;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.content = <span class="string">&quot;还剩贵宾&quot;</span> + --<span class="built_in">this</span>.num + <span class="string">&quot;位, &quot;</span>+<span class="string">&quot;欢迎下次光临!&quot;</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">hideBtnClick</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.isShowMenu = !<span class="built_in">this</span>.isShowMenu</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="comment">//波浪 代表多行 v-on:click=&quot;&quot; 表示对某个标签绑定某个函数 </span></span></span><br><span class="line"><span class="javascript">                  <span class="comment">//&#123;&#123;content可以看做是数据绑定 从data中取出的数据&#125;&#125;</span></span></span><br><span class="line"><span class="javascript">        <span class="string">`   </span></span></span><br><span class="line"><span class="string"><span class="javascript">            &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;div&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt; </span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;button v-on:click=&quot;welcomeBtnClick&quot;&gt;有顾客来&lt;/button&gt; &amp;nbsp; </span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;button v-on:click=&quot;byeBtnClick&quot;&gt;顾客离开&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                    &lt;div v-if=&quot;isShowMenu&quot;&gt;&#123;&#123;Menu&#125;&#125;&lt;/div&gt;    </span></span></span><br><span class="line"><span class="string"><span class="javascript">                    &lt;button v-on:click=&quot;hideBtnClick&quot;&gt;显示/隐藏套餐&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">            &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        `</span> <span class="comment">//字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="javascript">    &#125;).mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h3 id="data-中可以放多个数据"   >
          <a href="#data-中可以放多个数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#data-中可以放多个数据" class="headerlink" title="data(){} 中可以放多个数据"></a>data(){} 中可以放多个数据</h3>
      
        <h3 id="template-波浪中可以放多行的-前端代码"   >
          <a href="#template-波浪中可以放多行的-前端代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#template-波浪中可以放多行的-前端代码" class="headerlink" title="template: ``波浪中可以放多行的 前端代码"></a>template: ``波浪中可以放多行的 前端代码</h3>
      
        <h3 id="v-on-click-”function”-指定点击事件"   >
          <a href="#v-on-click-”function”-指定点击事件" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-on-click-”function”-指定点击事件" class="headerlink" title="v-on:click=”function” 指定点击事件"></a>v-on:click=”function” 指定点击事件</h3>
      
        <h3 id="当变量boolData为真时-变量data才会显示出来"   >
          <a href="#当变量boolData为真时-变量data才会显示出来" class="heading-link"><i class="fas fa-link"></i></a><a href="#当变量boolData为真时-变量data才会显示出来" class="headerlink" title="  当变量boolData为真时 变量data才会显示出来"></a><div v-if="boolData"><div>  当变量boolData为真时 变量data才会显示出来</h3>
      
        <h3 id="parseInt-val-可以将val值转换为数值型数据"   >
          <a href="#parseInt-val-可以将val值转换为数值型数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#parseInt-val-可以将val值转换为数值型数据" class="headerlink" title="parseInt(val) 可以将val值转换为数值型数据"></a>parseInt(val) 可以将val值转换为数值型数据</h3>
      
        <h2 id="for循环增加佳丽（技师）"   >
          <a href="#for循环增加佳丽（技师）" class="heading-link"><i class="fas fa-link"></i></a><a href="#for循环增加佳丽（技师）" class="headerlink" title="for循环增加佳丽（技师）"></a>for循环增加佳丽（技师）</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>for循环遍历佳丽<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses: [&#x27;小红&#x27;, &#x27;小丽&#x27;, &#x27;小芳&#x27;]</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(waitress, index) of waitresses&quot;</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">]</span><span class="template-variable">&#123;&#123;<span class="name">waitress</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        ` </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;).mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h4 id="v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index"   >
          <a href="#v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-for-”-item-index-of-list”-属性-代表从数组list中遍历每个item且附上索引-index" class="headerlink" title="v-for=”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index"></a>v-for=”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index</h4>
      
        <h2 id="将手动输入的值-添加佳丽"   >
          <a href="#将手动输入的值-添加佳丽" class="heading-link"><i class="fas fa-link"></i></a><a href="#将手动输入的值-添加佳丽" class="headerlink" title="将手动输入的值 添加佳丽"></a>将手动输入的值 添加佳丽</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>手动输入增加佳丽数据<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses: [&#x27;小红&#x27;, &#x27;小丽&#x27;, &#x27;小芳&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                inputWaitress:&#x27;&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            addWaitress()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.waitresses.push(this.inputWaitress)                </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">				this.inputWaitress = &#x27;&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: //波浪 代表多行 v-on:click=&quot;&quot; 表示对某个标签绑定某个函数 </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                  //</span><span class="template-variable">&#123;&#123;<span class="name">content可以看做是数据绑定</span> 从data中取出的数据&#125;&#125;</span><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">&quot;inputWaitress&quot;</span> /&gt;</span> <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;addWaitress&quot;</span>&gt;</span>增加技师<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(waitress, index) of waitresses&quot;</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">]</span><span class="template-variable">&#123;&#123;<span class="name">waitress</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        ` //字面量 双括号 放JS表达式或者变量</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;).mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h4 id="v-model-”stringVal”-定义输入的值-传给变量stringVal"   >
          <a href="#v-model-”stringVal”-定义输入的值-传给变量stringVal" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-model-”stringVal”-定义输入的值-传给变量stringVal" class="headerlink" title="v-model=”stringVal” 定义输入的值 传给变量stringVal"></a>v-model=”stringVal” 定义输入的值 传给变量stringVal</h4>
      
        <h4 id="同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）"   >
          <a href="#同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）" class="heading-link"><i class="fas fa-link"></i></a><a href="#同时给按钮绑定函数-将对应输入的值-尾添至数组中（同时输入框值清空）" class="headerlink" title="同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）"></a>同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）</h4>
      
        <h1 id="Vue重要概念：组件式开发"   >
          <a href="#Vue重要概念：组件式开发" class="heading-link"><i class="fas fa-link"></i></a><a href="#Vue重要概念：组件式开发" class="headerlink" title="Vue重要概念：组件式开发"></a>Vue重要概念：组件式开发</h1>
      
        <h3 id="什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件"   >
          <a href="#什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件" class="heading-link"><i class="fas fa-link"></i></a><a href="#什么是组件？组件就像是-“网页窗体中-一个又一个不同的Section”-网页上所看到的任何东西-都可以写成组件" class="headerlink" title="什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件"></a>什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件</h3>
      
        <h3 id="比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发"   >
          <a href="#比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发" class="heading-link"><i class="fas fa-link"></i></a><a href="#比如在上个例子中的-gt-增加佳丽-就可以利用这种思想来-gt-组件式开发" class="headerlink" title="比如在上个例子中的-&gt;增加佳丽 就可以利用这种思想来-&gt; 组件式开发"></a>比如在上个例子中的-&gt;增加佳丽 就可以利用这种思想来-&gt; 组件式开发</h3>
      
        <h3 id="把可以抽出来或者说可能重复被用到的代码块-抽离出来"   >
          <a href="#把可以抽出来或者说可能重复被用到的代码块-抽离出来" class="heading-link"><i class="fas fa-link"></i></a><a href="#把可以抽出来或者说可能重复被用到的代码块-抽离出来" class="headerlink" title="把可以抽出来或者说可能重复被用到的代码块 抽离出来"></a>把可以抽出来或者说可能重复被用到的代码块 抽离出来</h3>
      
        <h2 id="小案例：组件式开发-洗脚城系统"   >
          <a href="#小案例：组件式开发-洗脚城系统" class="heading-link"><i class="fas fa-link"></i></a><a href="#小案例：组件式开发-洗脚城系统" class="headerlink" title="小案例：组件式开发-洗脚城系统"></a>小案例：组件式开发-洗脚城系统</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>手动输入增加佳丽数据<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    //app是一个可以将自己的内容 挂载在id为app区域上的变量</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    const app = Vue.createApp(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        data()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            return &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                waitresses:[&#x27;小红&#x27;, &#x27;小芳&#x27;, &#x27;小丽&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                inputValue:&#x27; &#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        methods:&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            add()&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.waitresses.push(this.inputValue)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                this.inputValue = &#x27; &#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: `</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">my-title</span>/&gt;</span>   </span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">&quot;inputWaitress&quot;</span>/&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;add&quot;</span>&gt;</span>添加佳丽<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">my-waitress</span> </span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-for</span>=<span class="string">&quot;(item, index) of waitresses&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-bind:item</span>=<span class="string">&quot;item&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                        <span class="attr">v-bind:index</span>=<span class="string">&quot;index&quot;</span></span></span></span></span><br><span class="line"><span class="tag"><span class="xml"><span class="handlebars">                    /&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span>    </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        `</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"> </span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.component(&#x27;my-title&#x27;,&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template:&#x27;<span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">&quot;text-align=center&quot;</span>&gt;</span>洗脚城<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>&#x27;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    //抽离出上个例子中 动态地渲染 参数为props列表中的值</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.component(&#x27;my-waitress&#x27;, &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        props:[&#x27;item&#x27;, &#x27;index&#x27;],</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template:`<span class="tag">&lt;<span class="name">li</span>&gt;</span>[</span><span class="template-variable">&#123;&#123;<span class="name">index</span>&#125;&#125;</span><span class="xml">] </span><span class="template-variable">&#123;&#123;<span class="name">item</span>&#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">li</span>&gt;</span>`</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    app.mount(&quot;#app&quot;)</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

        <h2 id="VUE的组件式开发之总结："   >
          <a href="#VUE的组件式开发之总结：" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的组件式开发之总结：" class="headerlink" title="VUE的组件式开发之总结："></a>VUE的组件式开发之总结：</h2>
      <ol>
<li>在代码中，首先将app作为一个const常量（不可更改） 创建出来-&gt;  const app = Vue.createApp({})</li>
<li>然后编写这个app常量的各个组件- app.component(‘name’,{data})</li>
<li>….重复编写组件</li>
<li>最后选择把这个app挂载在 网页中的某个区域（可以id选择器，class选择器等..) app.mount(“#id_name”)</li>
</ol>

        <h3 id="重要属性"   >
          <a href="#重要属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#重要属性" class="headerlink" title="重要属性:"></a>重要属性:</h3>
      
        <h4 id="1-组件中的template-’’-分别填写单行、多行HTML"   >
          <a href="#1-组件中的template-’’-分别填写单行、多行HTML" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-组件中的template-’’-分别填写单行、多行HTML" class="headerlink" title="1.组件中的template:’’/ ``分别填写单行、多行HTML"></a>1.组件中的template:’’/ ``分别填写单行、多行HTML</h4>
      
        <h4 id="2-v-on-click-”fun-name”-绑定单击事件"   >
          <a href="#2-v-on-click-”fun-name”-绑定单击事件" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-v-on-click-”fun-name”-绑定单击事件" class="headerlink" title="2.v-on:click=”fun_name” 绑定单击事件"></a>2.v-on:click=”fun_name” 绑定单击事件</h4>
      
        <h4 id="3-v-for-”-item-index-of-list”-利用for循环遍历数组"   >
          <a href="#3-v-for-”-item-index-of-list”-利用for循环遍历数组" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-v-for-”-item-index-of-list”-利用for循环遍历数组" class="headerlink" title="3.v-for=”(item, index) of list” 利用for循环遍历数组"></a>3.v-for=”(item, index) of list” 利用for循环遍历数组</h4>
      
        <h4 id="4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数"   >
          <a href="#4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-v-bind-gt-绑定这个自定义组件中的props参数数组中的参数" class="headerlink" title="4.v.bind-&gt;绑定这个自定义组件中的props参数数组中的参数"></a>4.v.bind-&gt;绑定这个自定义组件中的props参数数组中的参数</h4>
      
        <h2 id="VUE的createApp-方法-与-mount-方法讲解"   >
          <a href="#VUE的createApp-方法-与-mount-方法讲解" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的createApp-方法-与-mount-方法讲解" class="headerlink" title="VUE的createApp()方法 与 mount()方法讲解"></a>VUE的createApp()方法 与 mount()方法讲解</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;&#125;)</span><br><span class="line">app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>

<ol>
<li>createApp就是<strong>Vue创建一个应用</strong></li>
<li>mount方法就是<strong>挂载到某一个DOM节点</strong>上</li>
</ol>

        <h2 id="VUE的设计模式：mvvm-gt-model-view-viewModel"   >
          <a href="#VUE的设计模式：mvvm-gt-model-view-viewModel" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE的设计模式：mvvm-gt-model-view-viewModel" class="headerlink" title="VUE的设计模式：mvvm-&gt;model, view, viewModel"></a>VUE的设计模式：mvvm-&gt;model, view, viewModel</h2>
      <p>Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。</span><br></pre></td></tr></table></div></figure>


        <h3 id="小案例认识-“数据”-“模板”-“数据视图连接层”"   >
          <a href="#小案例认识-“数据”-“模板”-“数据视图连接层”" class="heading-link"><i class="fas fa-link"></i></a><a href="#小案例认识-“数据”-“模板”-“数据视图连接层”" class="headerlink" title="小案例认识 “数据” “模板” “数据视图连接层”"></a>小案例认识 “数据” “模板” “数据视图连接层”</h3>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                <span class="attr">message</span>: <span class="string">&#x27;vincent99013.github.io&#x27;</span>   <span class="comment">//1.在这里定义了数据，也就是`model`数据</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">&quot;&lt;h2&gt;&#123;&#123;message&#125;&#125;&lt;/h2&gt;&quot;</span> <span class="comment">//2.在这里定义了模板，也就是`view`，</span></span><br><span class="line">        <span class="comment">//定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>
<ol>
<li>data(){} 中放数据</li>
<li>template:”” 中放模板view 即HTML代码</li>
<li>使得数据与视图之间得以连接</li>
</ol>
<p>model数据，是我们自己定义的，view模板也是我们自己定义的，但是vm是Vue自动给我们关联的。</p>
<p>当我们明白了什么是mvvm后，你就知道为什么我们给根组件起名vm了。</p>
<p>当我们获取了vm根节点后，其实就可以操作里边的数据了。比如在控制台中输入下面的代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vm.$data.message = <span class="string">&#x27;vincent&#x27;</span></span><br></pre></td></tr></table></div></figure>

<p>如果在app里 我们使用this指针操作data数组中某个变量</p>

        <h2 id="自动执行函数的理解"   >
          <a href="#自动执行函数的理解" class="heading-link"><i class="fas fa-link"></i></a><a href="#自动执行函数的理解" class="headerlink" title="自动执行函数的理解"></a>自动执行函数的理解</h2>
      <p>说起自动执行函数，还要从<strong>被动执行函数</strong>说起。比如给网页某一个元素一个点击事件：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">                alert(<span class="built_in">this</span>.message)</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                        &lt;button v-on:click=&quot;clickFun&quot;&gt;点击我弹窗（被动事件）&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>在面向数据编程中，此时给该按钮加入点击事件。<strong>只有当该按钮被点击时，事件才会被触发。这就是被动函数的概念！</strong></p>
<p>而对于自动执行函数..不需要相应的点击事件才触发</p>

        <h2 id="自动执行函数-gt-mounted"   >
          <a href="#自动执行函数-gt-mounted" class="heading-link"><i class="fas fa-link"></i></a><a href="#自动执行函数-gt-mounted" class="headerlink" title="自动执行函数-&gt; mounted()"></a>自动执行函数-&gt; mounted()</h2>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			alert(<span class="string">&#x27;自动弹出的内容&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;h1&gt;不用点击 自动弹窗&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>在网页加载完成后，自动进入mounted函数中，即自动执行里面的代码块。</p>

        <h2 id="（很重要！）VUE的所有生命周期"   >
          <a href="#（很重要！）VUE的所有生命周期" class="heading-link"><i class="fas fa-link"></i></a><a href="#（很重要！）VUE的所有生命周期" class="headerlink" title="（很重要！）VUE的所有生命周期"></a>（很重要！）VUE的所有生命周期</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210329210051193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="重要的四个基本生命周期函数"   >
          <a href="#重要的四个基本生命周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#重要的四个基本生命周期函数" class="headerlink" title="重要的四个基本生命周期函数"></a>重要的四个基本生命周期函数</h2>
      <ol>
<li>beforeCreate(): 在实例生成之前会自动执行的函数</li>
<li>created(): 在实例生成之后会自动执行的函数</li>
<li>beforeMount(): 在模板渲染完成之前执行的函数</li>
<li>mounted(): 在模板渲染完成之后执行的函数</li>
</ol>
<p>那么，现在用具体的例子来演示一下这四个基本周期函数吧：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;弹窗成功&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeCreate&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">created</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;created&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeMount</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeMount&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;mounted&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;h1&gt;不用点击 自动弹窗&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p>浏览器的控制台：<br><img   src="https://img-blog.csdnimg.cn/20210329210625512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><strong>可以看到：执行流程是: beforeCreate -&gt; created -&gt; beforeMount -&gt; mounted</strong></p>

        <h2 id="beforeUpdate和updated生命周期函数"   >
          <a href="#beforeUpdate和updated生命周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#beforeUpdate和updated生命周期函数" class="headerlink" title="beforeUpdate和updated生命周期函数"></a>beforeUpdate和updated生命周期函数</h2>
      <p>这两个周期函数是在VUE中的data数据发生变化时，才会被执行，<strong>一个是在变化之前，一个是在变化之后。</strong></p>
<p>用一个改变data中变量message的值的例子来说明：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Demo7<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;初始值&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">beforeUpdate</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;当前的值未被改变！&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">updated</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			<span class="built_in">console</span>.log(<span class="string">&#x27;当前的值已被改变!&#x27;</span>)</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">this</span>.message = <span class="string">&#x27;恭喜您，成功更改message的值！&#x27;</span>		</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">							&lt;button v-on:click=&quot;clickFun&quot;&gt;点击改变data中的数据值&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">						&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                   &lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="beforeUnmount和unmounted周期函数"   >
          <a href="#beforeUnmount和unmounted周期函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#beforeUnmount和unmounted周期函数" class="headerlink" title="beforeUnmount和unmounted周期函数"></a>beforeUnmount和unmounted周期函数</h2>
      <p>这两个生命周期函数是在VUE销毁时自动执行的函数，一个是销毁前执行，一个是销毁后执行。<br>beforeUnmount(): 当VUE应用失效时，会自动执行。<br>unmounted():当VUE应用失效，且DOM完全销毁之后，会自动执行。</p>
<p>代码演示如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;初始值&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="function"><span class="title">beforeUnmount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;beforeUnmount！&#x27;</span>)</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="function"><span class="title">unmounted</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">&#x27;unmounted!&#x27;</span>)</span><br><span class="line">		&#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">clickFun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = <span class="string">&#x27;恭喜您，成功更改message的值！&#x27;</span>		</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">						</span></span><br><span class="line"><span class="string">                   &lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">	app.unmount()</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>可以看到，页面在调用unmount函数前后，控制台会打印：<br><img   src="https://img-blog.csdnimg.cn/20210330090649903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br>在<strong>app.unmount()<strong>函数执行后，在</strong>beforeUnmount()<strong>方法里，DOM还是有内容的，然后到了</strong>unmounted</strong>方法中，就已经没有任何的DOM内容了。</p>

        <h2 id="VUE中最重要的概念-八大生命周期"   >
          <a href="#VUE中最重要的概念-八大生命周期" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中最重要的概念-八大生命周期" class="headerlink" title="VUE中最重要的概念-八大生命周期"></a>VUE中最重要的概念-八大生命周期</h2>
      
        <h3 id="创建，挂载，更改，非挂载"   >
          <a href="#创建，挂载，更改，非挂载" class="heading-link"><i class="fas fa-link"></i></a><a href="#创建，挂载，更改，非挂载" class="headerlink" title="创建，挂载，更改，非挂载"></a>创建，挂载，更改，非挂载</h3>
      <p>记住八大生命周期，可回想安卓中的生命周期函数！<br>各有两个<strong>un-XX</strong>与<strong>xx-ed</strong></p>
<p>如图所示：<br><img   src="https://img-blog.csdnimg.cn/20210330091336939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="插值表达式与v-bind数据绑定"   >
          <a href="#插值表达式与v-bind数据绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#插值表达式与v-bind数据绑定" class="headerlink" title="插值表达式与v-bind数据绑定"></a>插值表达式与v-bind数据绑定</h2>
      <p>在之前的代码类似 <strong>content</strong> 这种，正确叫法是 <strong>插值表达式</strong> 当然也可以叫做 <strong>字面量</strong></p>
<p>JSP中从后台SpringMVC中的ModelAndView中存储的数据 利用EL表示JSP网页取值一样</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;<span class="attr">message</span>: <span class="string">&#x27;数据&#x27;</span>&#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">&quot;&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>在以上代码中，我们利用面向数据编程的<strong>插值表达式</strong>  在模板template当中显示出data数组中的数据。</p>
<p>但有时可能我们需要显示的一些数据变量，中含有HTML标签，我们想<strong>在网页中以标签的形式显示出来而不是字符串的内容（即不会把&lt;&gt;这样的内容也显示出来），这样我们就需要用到</strong> v-html=”message” ，<strong>需要注意的是，我们需要用多行代码块`而不是单行代码块”</strong></p>
<p>具体代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;&lt;i&gt;斜体的内容（不含标签）&lt;i&gt;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`&lt;div v-html=&quot;message&quot;&gt;&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的数据双向绑定"   >
          <a href="#VUE中的数据双向绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的数据双向绑定" class="headerlink" title="VUE中的数据双向绑定"></a>VUE中的数据双向绑定</h2>
      <p>在模板template中引用的data数据，被绑定到模板对应mount挂载的网页区域中。当data中的数据发生改变时，对应网页中显示出来的内容也会发生改变。这就是双向数据绑定，<strong>而有时我们只需要这样的数据，让它只在第一次渲染出来，而之后不再跟随data中的数据的值变化而变化。</strong>这样的思想，我们可以用v-once属性完成！</p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;message数据的初始内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>:&#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = <span class="string">&#x27;更改数据中...&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;div v-once&gt;只会显示初始数据：&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&lt;button v-on:click=&quot;fun&quot;&gt;点击我但不会改变message的初始值&lt;/button&gt;					&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>在上述代码中，我们无论点击多少次按钮，带有v-once属性的div中的字面量数据，绝对不会再次渲染新值</p>

        <h2 id="插值表达式中-使用JS代码（三目运算）"   >
          <a href="#插值表达式中-使用JS代码（三目运算）" class="heading-link"><i class="fas fa-link"></i></a><a href="#插值表达式中-使用JS代码（三目运算）" class="headerlink" title="插值表达式中-使用JS代码（三目运算）"></a>插值表达式中-使用JS代码（三目运算）</h2>
      <p>比如我们要实现这么一个功能：这里有一个灯（不是开着的，就是关着的），我们利用嵌入JS代码至插值表达式中，实现开关灯。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">Switch</span>: <span class="literal">true</span> <span class="comment">//我们默认灯是开着的</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>:&#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.Switch = !<span class="built_in">this</span>.Switch <span class="comment">//点击一下 就改变一下灯的状态</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;状态：&#123;&#123;Switch? &#x27;灯已关闭&#x27;: &#x27;灯已打开&#x27;&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&lt;button v-on:click=&quot;fun&quot;&gt;开关灯&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>在某些情况下，我们需要这种“非真即假”的场景，来为我们改变一些元素的状态！</strong></p>

        <h2 id="v-bind-给某个元素绑定属性"   >
          <a href="#v-bind-给某个元素绑定属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-bind-给某个元素绑定属性" class="headerlink" title="v-bind 给某个元素绑定属性"></a>v-bind 给某个元素绑定属性</h2>
      <p>假设我们data数组中有message这个数据，而我们想要某个元素有一个title属性，同时这个<strong>title</strong>的值为message的值。（联想我们插入HTML标签，而不是标签变成了字符串）</p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div v-bind:title = &quot;message&quot; &gt; &#123;&#123;message&#125;&#125; &lt;/div&gt;`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>此时我们将鼠标移到对应的数据内容上，悬停出来的内容即为title，而title的值也是数据内容。说明，我们利用v-bind属性给这个元素赋值了message变量中的内容。</strong><br><img src="https://img-blog.csdnimg.cn/20210330101906688.png" alt="在这里插入图片描述"></p>

        <h2 id="v-on-的基本用法及简写"   >
          <a href="#v-on-的基本用法及简写" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-on-的基本用法及简写" class="headerlink" title="v-on 的基本用法及简写"></a>v-on 的基本用法及简写</h2>
      <p>v-on 是用来绑定响应事件的，在之前提到：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">	alert(<span class="string">&#x27;显示数据中...&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="attr">template</span>:<span class="string">&quot; &lt;button v-on:click=&quot;</span>fun<span class="string">&quot;&gt;点击我弹窗显示数据&lt;/button&gt; &quot;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>现在可以利用@click来代替：v-on:click事件</strong></p>
<p>也就是说 <strong>@事件=v-on:事件</strong></p>
<p>完整代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>效果图如下：<br><img   src="https://img-blog.csdnimg.cn/20210330190500540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="v-bind绑定的基本用法及简写"   >
          <a href="#v-bind绑定的基本用法及简写" class="heading-link"><i class="fas fa-link"></i></a><a href="#v-bind绑定的基本用法及简写" class="headerlink" title="v-bind绑定的基本用法及简写"></a>v-bind绑定的基本用法及简写</h2>
      <p>与v-on一样，v-bind也可以用来绑定属性。基本用法是：</p>
<p>:title=”val_name(变量名)”，即绑定title为data中的变量名。</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">title</span>: <span class="string">&#x27;:title生成的按钮标题&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot; :title=&quot;title&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>
<p>效果图如下：<br><img src="https://img-blog.csdnimg.cn/20210330190953268.png" alt="在这里插入图片描述"></p>

        <h2 id="模板动态参数"   >
          <a href="#模板动态参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#模板动态参数" class="headerlink" title="模板动态参数"></a>模板动态参数</h2>
      
        <h3 id="属性动态参数"   >
          <a href="#属性动态参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#属性动态参数" class="headerlink" title="属性动态参数"></a>属性动态参数</h3>
      <p>对于绑定的title属性，我们可以看成是一个动态变量<strong>parameter</strong>里面，赋值为<strong>title</strong>，title的值为相应的变量名。</p>
<p>所以我们可以利用这样的形式来写：<br><strong>简写bind函数时，我们不用title（:title），我们把title抽离出来，看成是一个parameter变量的值</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;fun&quot; :[name]=&quot;val&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="事件动态绑定"   >
          <a href="#事件动态绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#事件动态绑定" class="headerlink" title="事件动态绑定"></a>事件动态绑定</h3>
      <p>与属性动态绑定一样，我们可以<strong>将点击这个动作抽象成一个变量event</strong>，其值为click作为参数。对应的值不变！仍为data中的变量。</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @[<span class="attr">event</span>]=<span class="string">&quot;fun&quot;</span> <span class="attr">:</span>[<span class="attr">name</span>]=<span class="string">&quot;val&quot;</span>&gt;</span>点击我弹窗显示数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span> </span><br></pre></td></tr></table></div></figure>

<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="built_in">this</span>.message)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;button @[event]=&quot;fun&quot; :[name]=&quot;val&quot;&gt;点击我弹窗显示数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>通过事件绑定，属性绑定，这样我们可以动态切换对应的事件。只需要更改this.event以及this.parameter的值</p>

        <h2 id="VUE阻止默认事件（比如表单的默认提交）"   >
          <a href="#VUE阻止默认事件（比如表单的默认提交）" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE阻止默认事件（比如表单的默认提交）" class="headerlink" title="VUE阻止默认事件（比如表单的默认提交）"></a>VUE阻止默认事件（比如表单的默认提交）</h2>
      <p>最常见的事件就是阻止表单的默认提交，<strong>比如在表单的数据还没有完全验证成功情况下。是必须阻止表单默认提交的！</strong></p>
<p>通常我们的代码会像这样：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">				e.preventDefault()</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;form action=&quot;https://www.baidu.com&quot;&gt;</span></span><br><span class="line"><span class="string">				&lt;button type=&quot;submit&quot; @click=&quot;handleButton&quot;&gt;提交数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;/form&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<ol>
<li>我们给一个自定义的阻止事件handleButton(e)</li>
<li>这个e看做是触发事件的<strong>源按钮</strong> 看做是<strong>哪一个按钮触发了这个事件，就指哪一个按钮</strong></li>
<li>调用**e.preventDefault()**函数以阻止默认事件</li>
</ol>
<p><strong>对于那些经常要做的阻止操作而言，这种方法太低效了。</strong></p>
<p>因而，VUE给我们提供了一个<strong>模板修饰符</strong>，直接可以阻止默认行为，写法如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;handleButton&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>提交<span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></div></figure>
<p>上述代码中:<strong>@click.prevent=”阻止之后 转而进入的事件</strong><br>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;数据内容&#x27;</span>,</span><br><span class="line">				<span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>,</span><br><span class="line">				<span class="attr">val</span>: <span class="string">&#x27;标题值&#x27;</span>,</span><br><span class="line">				<span class="attr">event</span>: <span class="string">&#x27;click&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				alert(<span class="string">&#x27;拦截成功...&#x27;</span>)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;form action=&quot;https://www.baidu.com&quot; @click.prevent=&quot;handleButton&quot;&gt;</span></span><br><span class="line"><span class="string">				&lt;button type=&quot;submit&quot; &gt;提交数据&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;/form&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中模板的条件判断-v-if"   >
          <a href="#VUE中模板的条件判断-v-if" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中模板的条件判断-v-if" class="headerlink" title="VUE中模板的条件判断 v-if"></a>VUE中模板的条件判断 v-if</h2>
      <p>前面我们提到了三目运算符，结合例子说明：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">				<span class="attr">num</span>: <span class="number">10</span>,</span><br><span class="line">				<span class="attr">inputNum</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">				<span class="attr">flag</span>: <span class="literal">false</span>,</span><br><span class="line">				<span class="attr">message</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">		<span class="attr">methods</span>: &#123;</span><br><span class="line">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">				<span class="built_in">this</span>.message = (<span class="built_in">parseInt</span>(<span class="built_in">this</span>.inputNum)&gt;<span class="built_in">this</span>.num)? <span class="string">&#x27;你输入的数比10大&#x27;</span>: <span class="string">&#x27;并没有比10大&#x27;</span></span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">        <span class="attr">template</span>: </span><br><span class="line">		<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;input v-model=&quot;inputNum&quot;/&gt;</span></span><br><span class="line"><span class="string">			&lt;button @click=&quot;handleButton&quot;&gt;查询&lt;/button&gt;</span></span><br><span class="line"><span class="string">			&lt;div&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">    &#125;)</span><br><span class="line">	app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>当输入的数字大于10或者小于10时 都会提示</strong></p>
<p>现在从这种三目运算符到v-if的过渡：</p>
<p><strong>如果有这么一个场景，当输入的值为“蓝色”时，标签的背景是蓝色，如果是红色，背景是红色。</strong></p>
<p>代码实现如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">				<span class="attr">num</span>: <span class="number">10</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">inputValue</span>:<span class="string">&#x27;&#x27;</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">flag</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">				<span class="attr">message</span>: <span class="string">&#x27;&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">		<span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">			<span class="function"><span class="title">handleButton</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">this</span>.message = <span class="built_in">this</span>.inputValue</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: </span></span><br><span class="line"><span class="javascript">		<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;input v-model=&quot;inputValue&quot;/&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;button @click=&quot;handleButton&quot;&gt;查询&lt;/button&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;div v-if=&quot;message==&#x27;红色&#x27;&quot; class=&quot;red&quot;&gt;这片区域是红色&lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">			&lt;div v-if=&quot;message==&#x27;蓝色&#x27;&quot; class=&quot;blue&quot;&gt;这片区域是蓝色&lt;/div&gt;			</span></span></span><br><span class="line"><span class="string"><span class="javascript">		`</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">	app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">	<span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span></span><br><span class="line"><span class="css">	<span class="selector-class">.blue</span>&#123;<span class="attribute">color</span>:blue&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的computed域"   >
          <a href="#VUE中的computed域" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的computed域" class="headerlink" title="VUE中的computed域"></a>VUE中的computed域</h2>
      <p><strong>对应一般的方法而言，若页面重新渲染；则相应需要计算的方法，会再进行一次计算。</strong></p>
<p>比如，现data数据中有val，和content两个变量；<br>有一个涉及val变量的方法，计算val*10的值。</p>
<p>现在若在普通方法中，更改<strong>同在data中的变量content</strong>，那么val变量会重新计算一遍。</p>
<p>现在将代码放入computed域中，<strong>现在更改content的值时涉及val的方法不会再执行</strong></p>

        <h2 id="VUE中的watch域"   >
          <a href="#VUE中的watch域" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的watch域" class="headerlink" title="VUE中的watch域"></a>VUE中的watch域</h2>
      <p>Watch译为监听，则我们可以将一些需要<strong>监听数据变化，并对这些变化作出一些操作的数据源</strong>，<br>放在Watch域中。<strong>而且可以获取到 改变前的值&amp;改变后的值</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">num</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">computed</span>:&#123;</span><br><span class="line">            </span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.num--;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">watch</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">num</span>(<span class="params">current, prev</span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;你的num数据从&quot;</span> + prev + <span class="string">&quot;变化到了&quot;</span> + current)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div&gt;&#123;&#123;num&#125;&#125;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div&gt;&lt;button @click=&quot;fun&quot;&gt;点我减一&lt;/button&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的模板样式绑定详细讲解"   >
          <a href="#VUE中的模板样式绑定详细讲解" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的模板样式绑定详细讲解" class="headerlink" title="VUE中的模板样式绑定详细讲解"></a>VUE中的模板样式绑定详细讲解</h2>
      
        <h3 id="单个样式动态绑定"   >
          <a href="#单个样式动态绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#单个样式动态绑定" class="headerlink" title="单个样式动态绑定"></a>单个样式动态绑定</h3>
      <p>现有三种样式，我们动态地引用这三个样式：</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span><br><span class="line"><span class="selector-class">.green</span>&#123;<span class="attribute">color</span>:green&#125;</span><br><span class="line"><span class="selector-class">.back</span>&#123;<span class="attribute">background-color</span>:orange&#125;</span><br></pre></td></tr></table></div></figure>

<p>完整代码如下：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="attr">className</span>:<span class="string">&#x27;red&#x27;</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>:<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="javascript">        &lt;h1 :class=&quot;className&quot;&gt;初始字体颜色为红色&lt;/h1&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        &lt;h2&gt;您可以通过在控制台中修改vm.$data.className来动态引用class&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">        `</span></span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css"><span class="selector-class">.red</span>&#123;<span class="attribute">color</span>:red&#125;</span></span><br><span class="line"><span class="css"><span class="selector-class">.green</span>&#123;<span class="attribute">color</span>:green&#125;</span></span><br><span class="line"><span class="css"><span class="selector-class">.back</span>&#123;<span class="attribute">background-color</span>: orange;&#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>其中利用动态绑定:class=”className”，而在data中的变量className值代表真正的class值</strong><br>因此，我们可以在控制台中修改：<i>vm.$data.className=’green’</i></p>
<p>使得我们在<strong>style</strong>标签中的CSS样式能够生效。</p>

        <h3 id="对象形式绑定多个样式"   >
          <a href="#对象形式绑定多个样式" class="heading-link"><i class="fas fa-link"></i></a><a href="#对象形式绑定多个样式" class="headerlink" title="对象形式绑定多个样式"></a>对象形式绑定多个样式</h3>
      <p><strong>在上个例子中，我们有字体颜色.red类，有背景颜色.back类</strong><br>现在我们想要绑定这个DOM元素，既让它有样式.red，又让它有样式.back<br>则我们可以利用一个自定义对象classObject，将想要生效的样式置为true</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">className</span>:<span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">                <span class="attr">classObject</span>:&#123;<span class="string">&#x27;red&#x27;</span>:<span class="literal">true</span>, <span class="string">&#x27;back&#x27;</span>:<span class="literal">true</span>&#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">        &lt;h1 :class=&quot;cl assObject&quot;&gt;初始字体颜色为红色&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;h2&gt;您可以通过在控制台中修改vm.$data.className来动态引用class&lt;/h2&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>其中，我们看到，相应的red、back样式类都为true</strong></p>

        <h2 id="VUE中的for循环（以及如何避免重新渲染）"   >
          <a href="#VUE中的for循环（以及如何避免重新渲染）" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的for循环（以及如何避免重新渲染）" class="headerlink" title="VUE中的for循环（以及如何避免重新渲染）"></a>VUE中的for循环（以及如何避免重新渲染）</h2>
      <p>在之前的for循环，我们每次都是重新渲染页面：<br><strong>如果有含初始数据的数组，我们只需要重新渲染“新数据”的内容</strong><br>每次添加数据 我们可以避免重新渲染之前的已有数据</p>
<p><strong>利用 :key=”index+item” 绑定key属性！</strong></p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">list</span>:[<span class="string">&#x27;初始值&#x27;</span>]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.list.push(<span class="string">&#x27;尾添数据&#x27;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;button @click=&quot;fun&quot;&gt;点我&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;ul&gt;</span></span><br><span class="line"><span class="string">                &lt;li v-for=&quot;(item, index) in list&quot; :key=&quot;index+item&quot;&gt; </span></span><br><span class="line"><span class="string">                    [&#123;&#123;index&#125;&#125;]&#123;&#123;item&#125;&#125;</span></span><br><span class="line"><span class="string">                &lt;/li&gt;    </span></span><br><span class="line"><span class="string">            &lt;/ul&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的事件对象-event"   >
          <a href="#VUE中的事件对象-event" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的事件对象-event" class="headerlink" title="VUE中的事件对象-event"></a>VUE中的事件对象-event</h2>
      
        <h3 id="无参函数"   >
          <a href="#无参函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#无参函数" class="headerlink" title="无参函数"></a>无参函数</h3>
      <script>
    const app = Vue.createApp({
        data(){
            return{
                list:['初始值']
            }
        },
        methods:{
            fun(event){
                console.log(event)
            }
        },
        template:`
            <button @click="fun">点我</button>
           
        `
    })
    const vm = app.mount("#app")
</script>


        <h4 id="tips-我们用event-target看到事件触发源"   >
          <a href="#tips-我们用event-target看到事件触发源" class="heading-link"><i class="fas fa-link"></i></a><a href="#tips-我们用event-target看到事件触发源" class="headerlink" title="tips: 我们用event.target看到事件触发源"></a>tips: 我们用event.target看到事件触发源</h4>
      
        <h3 id="含参函数"   >
          <a href="#含参函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#含参函数" class="headerlink" title="含参函数"></a>含参函数</h3>
      <p><strong>当我们有参数时，调用函数若想用event</strong>，</p>
<p>此时应用<strong>click(para1, para2 …, $event)</strong></p>
<script>
    const app = Vue.createApp({
        data(){
            return{
            }
        },
        methods:{
            fun(num, event){
                alert(++num)
                console.log(event.target)
            }
        },
        template:`
            <button @click="fun(1, $event)">点我+1</button>
           
        `
    })
    const vm = app.mount("#app")
</script>


        <h2 id="VUE中一个按钮绑定两个方法"   >
          <a href="#VUE中一个按钮绑定两个方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中一个按钮绑定两个方法" class="headerlink" title="VUE中一个按钮绑定两个方法"></a>VUE中一个按钮绑定两个方法</h2>
      <p>有时，我们可能需要同时对一个按钮绑定一个事件。<strong>并同时执行两个方法fun1与fun2</strong></p>
<p>**@click=”fun1(), fun2()”**可以完成这个功能。会顺序执行这两个方法！</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">fun1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;小明取走100元&quot;</span>)</span><br><span class="line">            &#125;,<span class="function"><span class="title">fun2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&quot;银行少了100元&quot;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;button @click=&quot;fun1(), fun2()&quot;&gt;点我交易&lt;/button&gt;</span></span><br><span class="line"><span class="string">           </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="VUE中的事件修饰符"   >
          <a href="#VUE中的事件修饰符" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的事件修饰符" class="headerlink" title="VUE中的事件修饰符"></a>VUE中的事件修饰符</h2>
      <p><strong>VUE中有六种常见的事件修饰符</strong>他们分别是：</p>
<ol>
<li>stop</li>
<li>prevent</li>
<li>capture</li>
<li>self</li>
<li>once</li>
<li>passive</li>
</ol>

        <h3 id="停止事件的冒泡机制-事件修饰符-click-stop"   >
          <a href="#停止事件的冒泡机制-事件修饰符-click-stop" class="heading-link"><i class="fas fa-link"></i></a><a href="#停止事件的冒泡机制-事件修饰符-click-stop" class="headerlink" title="停止事件的冒泡机制-事件修饰符@click.stop"></a>停止事件的冒泡机制-事件修饰符@click.stop</h3>
      <p><strong>所谓冒泡机制（就像水里面的泡泡，DOM树中的事件就像泡泡一样向上逐个被捕捉！）</strong></p>
<p>比如网页结构是！</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h2</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line">...省略闭合标签</span><br></pre></td></tr></table></div></figure>

<p><strong>那么此时给button加的事件，会自底向上得逐个被各个标签捕获</strong><br>也就是说，若给h2添加点击事件，给button添加点击事件。</p>
<p>最终根据冒泡机制，<strong>会执行h2的点击事件</strong>。<br>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">divClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&#x27;最终被标签捕捉到了！&#x27;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">btnClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.count++</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="built_in">this</span>.count)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div @click=&quot;divClick&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;button @click=&quot;btnClick&quot;&gt;点击我体验冒泡机制&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p>而我们可以用**@click.stop=”btnClick”**给下边的按钮添加，避免它往上冒泡被捕获到。</p>

        <h3 id="prevent修饰符：阻止默然行为的修饰符-click-prevent"   >
          <a href="#prevent修饰符：阻止默然行为的修饰符-click-prevent" class="heading-link"><i class="fas fa-link"></i></a><a href="#prevent修饰符：阻止默然行为的修饰符-click-prevent" class="headerlink" title="prevent修饰符：阻止默然行为的修饰符@click.prevent"></a>prevent修饰符：阻止默然行为的修饰符@click.prevent</h3>
      <p>例如阻止form表单的默认提交行为。</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> @<span class="attr">click.prevent</span>=<span class="string">&quot;handleButton&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>上述代码可以避免自动form自动提交，转而转向handleButton函数</strong></p>

        <h3 id="capture修饰符，冒泡反方向-自顶向下"   >
          <a href="#capture修饰符，冒泡反方向-自顶向下" class="heading-link"><i class="fas fa-link"></i></a><a href="#capture修饰符，冒泡反方向-自顶向下" class="headerlink" title="capture修饰符，冒泡反方向(自顶向下)"></a>capture修饰符，冒泡反方向(自顶向下)</h3>
      
        <h3 id="once修饰符，事件只执行一次"   >
          <a href="#once修饰符，事件只执行一次" class="heading-link"><i class="fas fa-link"></i></a><a href="#once修饰符，事件只执行一次" class="headerlink" title="once修饰符，事件只执行一次"></a>once修饰符，事件只执行一次</h3>
      <p>once修饰符修饰的事件，只会执行一次。</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">divClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                alert(<span class="string">&#x27;最终被标签捕捉到了！&#x27;</span>)</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="function"><span class="title">btnClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">this</span>.count++</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="built_in">this</span>.count)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div @click=&quot;divClick&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;button @click.once=&quot;btnClick&quot;&gt;只会自增一次&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="passive修饰符：解决滚动时性能的修饰符"   >
          <a href="#passive修饰符：解决滚动时性能的修饰符" class="heading-link"><i class="fas fa-link"></i></a><a href="#passive修饰符：解决滚动时性能的修饰符" class="headerlink" title="passive修饰符：解决滚动时性能的修饰符"></a>passive修饰符：解决滚动时性能的修饰符</h3>
      
        <h2 id="VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定"   >
          <a href="#VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#VUE中的MOUSE、KEYBOARD鼠标-amp-键盘按键绑定" class="headerlink" title="VUE中的MOUSE、KEYBOARD鼠标&amp;键盘按键绑定"></a>VUE中的MOUSE、KEYBOARD鼠标&amp;键盘按键绑定</h2>
      <p><strong>在某种场景下，我们需要按下Enter键登录&amp;注册</strong><br><strong>我们需要在鼠标hover悬停于某个元素上方时，进行交互</strong></p>
<p>这样的操作还涉及到键盘、鼠标之间的事件</p>

        <h3 id="KEYDOWN事件绑定-敲下键盘里的某个键（input属性）"   >
          <a href="#KEYDOWN事件绑定-敲下键盘里的某个键（input属性）" class="heading-link"><i class="fas fa-link"></i></a><a href="#KEYDOWN事件绑定-敲下键盘里的某个键（input属性）" class="headerlink" title="KEYDOWN事件绑定 敲下键盘里的某个键（input属性）"></a>KEYDOWN事件绑定 敲下键盘里的某个键（input属性）</h3>
      <p>在输入框中输入内容时，会触发<strong>keydown</strong>事件</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;正在键入....&#x27;</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input @keydown=&quot;keyDownHandler&quot; /&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="单个特定键位检测-input属性"   >
          <a href="#单个特定键位检测-input属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#单个特定键位检测-input属性" class="headerlink" title="单个特定键位检测(input属性)"></a>单个特定键位检测(input属性)</h3>
      <p><strong>对于特定的键Enter、Space等键</strong>有时我们会需要检测<br>比如实现表单的Enter提交方式</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">count</span>: <span class="number">1</span>,</span><br><span class="line">                <span class="attr">username</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input @keydown.enter=&quot;keyEnterDownHandler&quot; v-model=&quot;username&quot;/&gt;                </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">            &lt;div&gt;</span></span><br><span class="line"><span class="string">                &lt;button &gt;提交表单&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="表单的数据双向绑定"   >
          <a href="#表单的数据双向绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单的数据双向绑定" class="headerlink" title="表单的数据双向绑定"></a>表单的数据双向绑定</h1>
      
        <h2 id="什么叫数据的双向绑定？"   >
          <a href="#什么叫数据的双向绑定？" class="heading-link"><i class="fas fa-link"></i></a><a href="#什么叫数据的双向绑定？" class="headerlink" title="什么叫数据的双向绑定？"></a>什么叫数据的双向绑定？</h2>
      <p><strong>所谓数据的双向绑定，就是指：data中的变量val与页面中的字面量相互绑定</strong></p>
<ol>
<li>当data中的val发生改变时 前端页面显示的值会发生变化</li>
<li>当前端中的内容发生变化（比如输入框输入不同的值） 那么data中的内容也会发生变化</li>
</ol>
<p><strong>这种两方中其中一方发生变化，而另一方必然随之变化的过程，称为双向绑定</strong></p>

        <h1 id="表单INPUT-TEXTAREA文本框的绑定"   >
          <a href="#表单INPUT-TEXTAREA文本框的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单INPUT-TEXTAREA文本框的绑定" class="headerlink" title="表单INPUT TEXTAREA文本框的绑定"></a>表单INPUT TEXTAREA文本框的绑定</h1>
      <p>比如<strong>data</strong>中有一个变量<strong>val</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span>&#123;</span><br><span class="line">		<span class="attr">val</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p>而前端页面中，输入的值赋给<strong>val</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">template:<span class="string">&quot;&lt;input v-model=&quot;</span>val<span class="string">&quot; /&gt;&quot;</span></span><br></pre></td></tr></table></div></figure>

<p>这样，输入不同的前端页面，<strong>data中的val</strong>也会不同！</p>
<ol>
<li>input单行文本框添加**v-model=”val”**属性</li>
<li><strong>textarea</strong>多行文本框同样适用</li>
</ol>

        <h1 id="表单单选框RADIO的绑定"   >
          <a href="#表单单选框RADIO的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单单选框RADIO的绑定" class="headerlink" title="表单单选框RADIO的绑定"></a>表单单选框RADIO的绑定</h1>
      <p><strong>单选框一般用字符串接收</strong></p>
<p>参与单选框中的v-model对应的data中的字符串变量命名意义是：这些若干同属的类别<br>**比如男、女 其v-model=”gender”**这样命名</p>
<p>其次，应有不同的value属性值来区分这些单选框！</p>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">gender</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;radio&quot; v-model=&quot;gender&quot;  value=&quot;男&quot;/&gt;男</span></span><br><span class="line"><span class="string">                &lt;br&gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;radio&quot; v-model=&quot;gender&quot; value=&quot;女&quot;/&gt;女             </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="表单多选框CHECKBOX的绑定"   >
          <a href="#表单多选框CHECKBOX的绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#表单多选框CHECKBOX的绑定" class="headerlink" title="表单多选框CHECKBOX的绑定"></a>表单多选框CHECKBOX的绑定</h1>
      <p>对于多选框的每个框<strong>要么属于checked被选中的状态 要么没被选中</strong></p>
<ol>
<li>所以<strong>如果只有一个选项 我们应用Bool值true与false</strong>来确定多选框的选中状态</li>
<li>如果有多个选项，我们**应该用一个数组[]**来装！</li>
</ol>
<p>完整代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">gender</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">                <span class="attr">interests</span>:[]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">methods</span>:&#123;</span><br><span class="line">            <span class="function"><span class="title">keyEnterDownHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;提交成功！您的数据为&#x27;</span> + <span class="built_in">this</span>.username)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;checkbox&quot; v-model=&quot;interests&quot;  value=&quot;打篮球&quot;/&gt;打篮球</span></span><br><span class="line"><span class="string">                &lt;br&gt;</span></span><br><span class="line"><span class="string">                &lt;input type=&quot;checkbox&quot; v-model=&quot;interests&quot; value=&quot;游泳&quot;/&gt;游泳             </span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="深入v-model"   >
          <a href="#深入v-model" class="heading-link"><i class="fas fa-link"></i></a><a href="#深入v-model" class="headerlink" title="深入v-model"></a>深入v-model</h1>
      
        <h2 id="1-LAZY-懒显示"   >
          <a href="#1-LAZY-懒显示" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-LAZY-懒显示" class="headerlink" title="1.LAZY 懒显示"></a>1.LAZY 懒显示</h2>
      <p>对于双向绑定，当输入框绑定data中的变量<strong>content</strong>后，如果页面的某一个区域<strong>立即用到了这个content</strong><br>那么在输入的过程中，页面会<strong>实时显示content的值</strong></p>
<p><strong>我们使用 v-model.lazy=”val” 来懒显示，即输入框失去焦点后，内容才会发生变化</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">content</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            输入框失去焦点才会显示的content：&#123;&#123;content&#125;&#125;</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                &lt;input v-model.lazy=&quot;content&quot;/&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="2-NUMBER-输入数字"   >
          <a href="#2-NUMBER-输入数字" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-NUMBER-输入数字" class="headerlink" title="2.NUMBER 输入数字"></a>2.NUMBER 输入数字</h2>
      <p><strong>默认输入的内容是字符串类型 为避免后台转换数字</strong></p>
<p><strong>我们可以使用v-model.number=”val” 来转换成输入绑定data中的变量val</strong></p>
<p>代码如下：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">content</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">            输入的数据类型是：&#123;&#123;typeof content&#125;&#125;</span></span><br><span class="line"><span class="string">            &lt;div &gt;</span></span><br><span class="line"><span class="string">                年龄：&lt;input v-model.number=&quot;content&quot;/&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;    </span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="去除前后空格-trim"   >
          <a href="#去除前后空格-trim" class="heading-link"><i class="fas fa-link"></i></a><a href="#去除前后空格-trim" class="headerlink" title="去除前后空格-trim"></a>去除前后空格-trim</h2>
      <p>trim属性用来消除input框输入内容前后的空格的。现在我们再字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出(详细请看视频操作)。 加入trim修饰符后，Vue就会自动给我们去除前后的空格.</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">v-model.trim=<span class="string">&quot;content&quot;</span></span><br></pre></td></tr></table></div></figure></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/26/%E7%BF%BB%E8%AF%91%E4%BD%9C%E5%93%81-%E5%A6%82%E4%BD%95%E5%83%8F%E6%AF%8D%E8%AF%AD%E8%80%85%E4%B8%80%E6%A0%B7%E8%AF%B4%E8%8B%B1%E8%AF%AD/">翻译作品--如何像母语者一样说英语</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-26</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-03-26</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">235</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">2分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="How-to-speak-English-fast-and-understand-natives-Part-I-如何更快理解母语者"   >
          <a href="#How-to-speak-English-fast-and-understand-natives-Part-I-如何更快理解母语者" class="heading-link"><i class="fas fa-link"></i></a><a href="#How-to-speak-English-fast-and-understand-natives-Part-I-如何更快理解母语者" class="headerlink" title="How to speak English fast and understand natives (Part I) | 如何更快理解母语者"></a>How to speak English fast and understand natives (Part I) | 如何更快理解母语者</h1>
      
        <h2 id="该视频由YouTube博主讲述如何像母语者一样说英语"   >
          <a href="#该视频由YouTube博主讲述如何像母语者一样说英语" class="heading-link"><i class="fas fa-link"></i></a><a href="#该视频由YouTube博主讲述如何像母语者一样说英语" class="headerlink" title="该视频由YouTube博主讲述如何像母语者一样说英语"></a>该视频由YouTube博主讲述如何像母语者一样说英语</h2>
      <p>Do you really need to speak English fast? When native English speakers speak fast, the boundaries between words disappear and this gives the impression of talking fast. In reality, they are not talking faster than normal —it’s just that the sounds in their pronunciation flow together in the most smooth and efficient way.<br>你一定要说得快吗?当以英语为母语的人说得很快时，单词之间的界限就消失了，这会给人一种说得很快的印象。在现实生活中，他们并没有说得比平时快，只是他们的发音中的声音以最流畅和有效的方式衔接在一起。</p>

        <h2 id="视频地址"   >
          <a href="#视频地址" class="heading-link"><i class="fas fa-link"></i></a><a href="#视频地址" class="headerlink" title="视频地址"></a>视频地址</h2>
      <div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" 
src="https://player.bilibili.com/player.html?aid=247267596&bvid=BV17v41187GJ&cid=315455726&page=1"
 frameborder="no" scrolling="no"></iframe>
</div>


</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/26/xxx/">复试代码（仅供参考）</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-26</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-04-10</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">1.4k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">9分</span></span></div></header><div class="post-body"><div class="post-excerpt">
        <h1 id="题目：03-成本与利润最大化问题"   >
          <a href="#题目：03-成本与利润最大化问题" class="heading-link"><i class="fas fa-link"></i></a><a href="#题目：03-成本与利润最大化问题" class="headerlink" title="题目：03 成本与利润最大化问题"></a>题目：03 成本与利润最大化问题</h1>
      
        <h2 id="题目背景"   >
          <a href="#题目背景" class="heading-link"><i class="fas fa-link"></i></a><a href="#题目背景" class="headerlink" title="题目背景"></a>题目背景</h2>
      <p>地球上所有的自然资源是有限的。拿矿物资源来说，它不是上帝的恩赐，<br>而是经过几百万年，甚至几亿年的地质变化才形成的。地球是无私的，它向人<br>类慷慨地提供矿产资源。但是，如果不加节制地开采，必将加速地球上矿产资<br>源的枯竭。 </p>
<p>人类生活需要的水资源、森林资源、生物资源、大气资源，本可以不断地<br>再生，长期给人类做贡献。但是因为人类随意毁坏自然资源，不顾后果地滥用<br>化学用品，不但使它们不能再生，还造成了一系列生态灾难，给人类生存带来<br>了严重的威胁。 </p>
<p>资源是有限的，我们必须要加以珍惜，合理使用地球上有限的资源，细水<br>长流，方能持久！ </p>
<p>在资源有限的前提下，人类在生产生活中，需要设计合理、优化的资源使<br>用方案，以满足其利润最大化的需求。 </p>
<p><strong>假设工程项目总数为 n，可利用的资源份额总数为 m，给每项工程投入的资<br>源份额数不同时，所获得的利润也不同。</strong> 其利润表如下所示： </p>
<p><img   src="https://img-blog.csdnimg.cn/2021032609081163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="题目描述"   >
          <a href="#题目描述" class="heading-link"><i class="fas fa-link"></i></a><a href="#题目描述" class="headerlink" title="题目描述"></a>题目描述</h2>
      <p>一、请完成如下问题的求解：<br>■问题 1（50 分）：请利用 C/C++编程实现并输出当所获得的利润最大时，<br>资源的投入方案。<br>测试用例（备注：须遵守测试用例所示范的输入、输出格式及形式要求）： </p>
<p>备注 1：测试用例示范<br>测试用例 1<br>输入：<br>请输入工程项目总数 n：X↙<br>请输入资源份额总数 m：X↙<br>请输入工程项目与投入资源份额数所对应利润：（可参考问题 2 中的利润表<br>数据形式）<br>输出：<br>最后的决策结果为：给工程 1 投入 X 个份额，工程 2 投入 X 个份额，……，<br>工程 X 投入 X 个份额的资源时，可达到最大利润 XXX. （其中 X 为具体数值） </p>
<p>测试用例 2<br>输入：<br>请输入工程项目总数 n：3↙<br>请输入资源份额总数 m：8↙<br>请输入工程项目与投入资源份额数所对应利润：（参考问题 2 中的利润表数<br>据）<br>输出：<br>最后的决策结果为：给工程 1 投入 0 个份额，工程 2 投入 4 个份额，工程 3<br>投入 4 个份额的资源时，可达到最大利润 140. </p>
<p>■问题 2（30 分）：当可利用的资源份额总数为 8，工程项目总数为 3 以及<br>利润表如下所示时，请给出资源投入最优方案的分析、计算过程。<br><img src="https://img-blog.csdnimg.cn/20210326090818906.png" alt="在这里插入图片描述"></p>
<p>■问题 3（10 分）：分析给出所实现算法的时间复杂度； </p>
<p>■问题 4（10 分）：请简要给出可能的进一步提高算法时间复杂度的解决</p>

        <h1 id="源代码"   >
          <a href="#源代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#源代码" class="headerlink" title="源代码"></a>源代码</h1>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;bits/stdc++.h&gt;</span></span></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"></span><br><span class="line"><span class="keyword">int</span> maxProfit = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//最终的各个工程的对应份额数</span></span><br><span class="line">vector&lt;<span class="keyword">int</span>&gt; finalShare;</span><br><span class="line"></span><br><span class="line"><span class="comment">//n代表工程数</span></span><br><span class="line"><span class="comment">//m代表份额数</span></span><br><span class="line"><span class="keyword">int</span> n, m;</span><br><span class="line"></span><br><span class="line"><span class="comment">//data表示所有数据数组 currentProfit代表当前利润 projectNum代表已到工程索引 shareNum代表已用的份额数 currentShare代表当前份额数组</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">cacl</span><span class="params">(vector&lt;vector&lt;<span class="keyword">int</span>&gt;&gt; &amp;data, <span class="keyword">int</span> currentProfit, <span class="keyword">int</span> projectNum, <span class="keyword">int</span> shareNum, vector&lt;<span class="keyword">int</span>&gt; currentShare)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="comment">//跳出递归有两个条件 </span></span><br><span class="line">	<span class="comment">//1.当份额数达到规定数</span></span><br><span class="line">	<span class="comment">//2.工程索引超出规定数</span></span><br><span class="line">	<span class="keyword">if</span>(shareNum &gt;= m)&#123;</span><br><span class="line">		<span class="keyword">if</span>(shareNum == m)&#123;</span><br><span class="line">			<span class="keyword">if</span>(currentProfit &gt; maxProfit)&#123;	</span><br><span class="line">				maxProfit = currentProfit;</span><br><span class="line">				finalShare.<span class="built_in">clear</span>();</span><br><span class="line">				</span><br><span class="line">				<span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>; i&lt;currentShare.<span class="built_in">size</span>(); i++)&#123;</span><br><span class="line">					finalShare.<span class="built_in">push_back</span>(currentShare[i]);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">if</span>(projectNum &gt;= n)&#123;</span><br><span class="line">		<span class="keyword">if</span>(currentProfit &gt; maxProfit)&#123;</span><br><span class="line">			maxProfit = currentProfit;</span><br><span class="line">			finalShare.<span class="built_in">clear</span>();</span><br><span class="line">			<span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>; i&lt;currentShare.<span class="built_in">size</span>(); i++)&#123;</span><br><span class="line">				finalShare.<span class="built_in">push_back</span>(currentShare[i]);</span><br><span class="line">			&#125;		</span><br><span class="line">		&#125;	</span><br><span class="line">		<span class="keyword">return</span>;</span><br><span class="line">	&#125;</span><br><span class="line">		</span><br><span class="line">	vector&lt;<span class="keyword">int</span>&gt; temp;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//最开始的currentShare数组为空 for循环不会进入</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>; i&lt;currentShare.<span class="built_in">size</span>(); i++)&#123;</span><br><span class="line">		temp.<span class="built_in">push_back</span>(currentShare[i]);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//temp暂时存储要选的份额-&gt;这里push_back表示第一层不选</span></span><br><span class="line">	temp.<span class="built_in">push_back</span>(<span class="number">0</span>);	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//进入下一层 然后继续进入temp.push_back(0) 第二层也不选</span></span><br><span class="line">	<span class="comment">//直到工程索引达到3 见边界if函数 return往下进入 for循环</span></span><br><span class="line">	<span class="built_in">cacl</span>(data, currentProfit, projectNum+<span class="number">1</span>, shareNum, temp);</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//开始从第三层开始 选第一个！ 比较利润 选第二个..同理下去</span></span><br><span class="line">	<span class="comment">//然后回退到第二层 选第二层第一个 第三层分别第1~8个 第二个..同理</span></span><br><span class="line">	<span class="comment">//然后回退到第一层 选第一层第一个 第二层第1~8个 第三层第1~8个</span></span><br><span class="line">	<span class="comment">//这个过程中 一直比较利润确定最终利润（在选中的规定份额数内）</span></span><br><span class="line">	</span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>; i&lt;data[projectNum].<span class="built_in">size</span>(); i++)&#123;</span><br><span class="line">		vector&lt;<span class="keyword">int</span>&gt; temp1;</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">int</span> j=<span class="number">0</span>; j&lt;currentShare.<span class="built_in">size</span>(); j++)&#123;</span><br><span class="line">			temp1.<span class="built_in">push_back</span>(currentShare[j]);</span><br><span class="line">		&#125;	</span><br><span class="line">		temp1.<span class="built_in">push_back</span>(i+<span class="number">1</span>);</span><br><span class="line">		<span class="built_in">cacl</span>(data, currentProfit+data[projectNum][i], projectNum+<span class="number">1</span>, shareNum+(i+<span class="number">1</span>), temp1);</span><br><span class="line">	&#125;	</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">fun</span><span class="params">()</span></span>&#123;</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;请输入工程项目总数n：&quot;</span>;</span><br><span class="line">	cin &gt;&gt; n;</span><br><span class="line">	</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;请输入资源份额总数m：&quot;</span>;</span><br><span class="line">	cin &gt;&gt; m;</span><br><span class="line">	</span><br><span class="line">	vector&lt;vector&lt;<span class="keyword">int</span>&gt;&gt; dataVector;</span><br><span class="line">	<span class="keyword">int</span> temp;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>; i&lt;n; i++)&#123;</span><br><span class="line">		vector&lt;<span class="keyword">int</span>&gt; columnVector;</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">int</span> j=<span class="number">0</span>; j&lt;m; j++)&#123;</span><br><span class="line">			cin &gt;&gt; temp;</span><br><span class="line">			columnVector.<span class="built_in">push_back</span>(temp);</span><br><span class="line">		&#125;</span><br><span class="line">		dataVector.<span class="built_in">push_back</span>(columnVector);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="built_in">cacl</span>(dataVector, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, &#123;&#125;);</span><br><span class="line"></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">int</span> k=<span class="number">0</span>; k&lt;finalShare.<span class="built_in">size</span>(); ++k)&#123;</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;给工程&quot;</span> &lt;&lt; k+<span class="number">1</span> &lt;&lt; <span class="string">&quot;投入&quot;</span> &lt;&lt; finalShare[k] &lt;&lt; <span class="string">&quot;个份额,&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;可达最大利润&quot;</span> &lt;&lt; maxProfit &lt;&lt; <span class="string">&quot;.&quot;</span> &lt;&lt;endl;		</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="built_in">fun</span>();</span><br><span class="line">&#125; </span><br></pre></td></tr></table></div></figure></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/19/C-%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/">C++管理系统</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-19</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-03-25</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">1.9k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">19分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="源代码"   >
          <a href="#源代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#源代码" class="headerlink" title="源代码"></a>源代码</h1>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;iostream&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;string&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;cstring&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typedef</span> <span class="class"><span class="keyword">struct</span> <span class="title">student</span>          //学生信息</span></span><br><span class="line"><span class="class">&#123;</span></span><br><span class="line">    <span class="keyword">char</span> stu_num[<span class="number">15</span>];           <span class="comment">//学号</span></span><br><span class="line">    <span class="keyword">char</span> name[<span class="number">15</span>];              <span class="comment">//姓名</span></span><br><span class="line">    <span class="keyword">char</span> stu_id[<span class="number">20</span>];            <span class="comment">//身份证号</span></span><br><span class="line">    <span class="keyword">char</span> institute[<span class="number">50</span>];         <span class="comment">//学院</span></span><br><span class="line">    <span class="keyword">char</span> stu_type;              <span class="comment">//学生类型</span></span><br><span class="line">    <span class="keyword">char</span> major[<span class="number">50</span>];             <span class="comment">//专业</span></span><br><span class="line">    <span class="keyword">char</span> route[<span class="number">100</span>];            <span class="comment">//返校路线</span></span><br><span class="line">    <span class="keyword">char</span> TrafficTools[<span class="number">100</span>];     <span class="comment">//交通工具</span></span><br><span class="line">    <span class="keyword">char</span> isCloseContact;        <span class="comment">//近14天是否有密切接触确诊人员</span></span><br><span class="line">    <span class="keyword">char</span> temperature[<span class="number">10</span>];       <span class="comment">//入校时温度</span></span><br><span class="line">    <span class="keyword">char</span> isFever;               <span class="comment">//是否发烧</span></span><br><span class="line">    <span class="keyword">char</span> isCough;               <span class="comment">//是否咳嗽</span></span><br><span class="line">    <span class="keyword">char</span> time[<span class="number">20</span>];              <span class="comment">//进校时间</span></span><br><span class="line"> </span><br><span class="line">&#125;Student;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Print</span><span class="params">(Student stu)</span>             <span class="comment">//输出学生信息</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;\n*****************学生信息*****************\n\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;学号: %s\n姓名: %s\n身份证号: %s\n学生类型: %c\n&quot;</span>,stu.stu_num,stu.name,stu.stu_id,stu.stu_type);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;学院: %s\n专业: %s\n返校路线: %s\n交通工具: %s\n&quot;</span>,stu.institute,stu.major,stu.route,stu.TrafficTools);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;过去14天是否密切接触确诊人员（是：1/否：0）： %c\n返校温度: %s\n&quot;</span>,stu.isCloseContact,stu.temperature);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;是否发烧（是：1/否：0）: %c\n是否咳嗽（是：1/否：0）: %c\n返校时间: %s\n&quot;</span>,stu.isFever,stu.isCough,stu.time);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Instruction</span><span class="params">()</span>                  <span class="comment">//帮助</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;====================学生返校信息管理系统====================\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                                                          =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   ***功能介绍***                         =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                                                          =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   1.录入学生信息                         =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   2.查找学生信息                         =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   3.修改学生信息                         =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   4.按顺序输出某学院学生信息             =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   5.请求帮助                             =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                   6.退出系统                             =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                                                          =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;=                                                          =\n&quot;</span>);</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;============================================================\n&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">WriteStuInfo</span><span class="params">()</span></span>&#123;</span><br><span class="line">	FILE *fp;</span><br><span class="line">	<span class="keyword">char</span> c = <span class="string">&#x27;y&#x27;</span>;</span><br><span class="line">	<span class="keyword">char</span> file[<span class="number">50</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\&quot;</span>;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">while</span>(c == <span class="string">&#x27;y&#x27;</span>)&#123;</span><br><span class="line">		Student stu = &#123;<span class="number">0</span>&#125;; <span class="comment">//初始化</span></span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请按照以下内容初始化：\n&quot;</span>;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入学号\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_num;</span><br><span class="line"></span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入姓名\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.name;</span><br><span class="line"></span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入身份证\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_id;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;学生类型：（1本 2研 3博）\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_type;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;所在学院\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.institute;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;所在专业\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.major;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;返校所经城市\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.route;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;交通工具\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.TrafficTools;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;是否接触确诊：1是 0否&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.isCloseContact;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;入校时的温度\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.temperature;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;是否发烧: 1是 0否\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.isFever;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;是否咳嗽: 1是 0否\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.isCough;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;入校时间\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.time;</span><br><span class="line">		</span><br><span class="line">		<span class="built_in">strcat</span>(file, stu.institute);</span><br><span class="line">		<span class="built_in">strcat</span>(file, <span class="string">&quot;.txt&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; file;</span><br><span class="line">		fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;a&quot;</span>);</span><br><span class="line">		<span class="keyword">if</span>(fp == <span class="literal">NULL</span>)&#123;</span><br><span class="line">			cout &lt;&lt; <span class="string">&quot;文件无法打开\n&quot;</span>;</span><br><span class="line">			<span class="built_in">exit</span>(<span class="number">0</span>); </span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">if</span>(<span class="built_in">fwrite</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp) != <span class="number">1</span>)&#123;</span><br><span class="line">			cout &lt;&lt;<span class="string">&quot;数据无法录入\n&quot;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//在定义的数组长度不够的情况下 </span></span><br><span class="line">		<span class="comment">//每次读入一组数据 可以在文件中打印一个换行符</span></span><br><span class="line">		<span class="comment">//fprintf(fp, &quot;\n&quot;); </span></span><br><span class="line">		</span><br><span class="line">		<span class="built_in">fclose</span>(fp);</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;是否继续录入？(y/n)\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; c;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Search</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="keyword">char</span> c = <span class="string">&#x27;y&#x27;</span>;</span><br><span class="line">	<span class="keyword">int</span> flag = <span class="number">0</span>;</span><br><span class="line">	FILE* fp;</span><br><span class="line">	<span class="keyword">int</span> isSearch;</span><br><span class="line">	Student stu = &#123;<span class="number">0</span>&#125;;</span><br><span class="line">	<span class="keyword">while</span>(c == <span class="string">&#x27;y&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">char</span> stu_info[<span class="number">50</span>], ins[<span class="number">50</span>] = &#123;<span class="number">0</span>&#125;;</span><br><span class="line">		<span class="keyword">char</span> file[<span class="number">50</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\&quot;</span>;</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;输入学生所在学院\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; ins;</span><br><span class="line">		</span><br><span class="line">		<span class="built_in">strcat</span>(file ,ins);</span><br><span class="line">		<span class="built_in">strcat</span>(file, <span class="string">&quot;.txt&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;r&quot;</span>);</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入查找方式：1/学号,2/姓名\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; flag;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;待查找的信息：&quot;</span> &lt;&lt;endl;</span><br><span class="line">		cin &gt;&gt; stu_info;</span><br><span class="line">		</span><br><span class="line">		isSearch = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">while</span>(<span class="built_in">fread</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp) == <span class="number">1</span> )&#123;</span><br><span class="line">			<span class="comment">//当读到数据时</span></span><br><span class="line">			<span class="keyword">if</span>(flag == <span class="number">1</span>)&#123;</span><br><span class="line">				<span class="keyword">if</span>(!<span class="built_in">strcmp</span>(stu.stu_num, stu_info))&#123;</span><br><span class="line">					cout &lt;&lt; <span class="string">&quot;找到了，数据为：\n&quot;</span>;</span><br><span class="line">					<span class="built_in">Print</span>(stu);</span><br><span class="line">					isSearch = <span class="number">1</span>;</span><br><span class="line">					<span class="keyword">break</span>;</span><br><span class="line">				&#125;</span><br><span class="line">				</span><br><span class="line">				<span class="keyword">if</span>(!<span class="built_in">strcmp</span>(stu.name, stu_info))&#123;</span><br><span class="line">					cout &lt;&lt; <span class="string">&quot;找到了，数据为：\n&quot;</span>;</span><br><span class="line">					<span class="built_in">Print</span>(stu);</span><br><span class="line">					isSearch = <span class="number">1</span>;</span><br><span class="line">					<span class="keyword">break</span>;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125; </span><br><span class="line">			<span class="keyword">if</span>(isSearch == <span class="number">0</span>)&#123;</span><br><span class="line">				cout &lt;&lt; <span class="string">&quot;查无此人！&quot;</span> &lt;&lt;endl;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="built_in">fclose</span>(fp);</span><br><span class="line">			</span><br><span class="line">			cout &lt;&lt; <span class="string">&quot;是否继续查找(y/n)\n&quot;</span>;</span><br><span class="line">			cin &gt;&gt; c;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Alter</span><span class="params">()</span></span>&#123;</span><br><span class="line">	FILE* fp;</span><br><span class="line">	<span class="keyword">int</span> isSearch;</span><br><span class="line">	<span class="keyword">int</span> pos, num;</span><br><span class="line">	<span class="keyword">int</span> i;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">char</span> c = <span class="string">&#x27;y&#x27;</span>;</span><br><span class="line">	<span class="keyword">while</span>(c == <span class="string">&#x27;y&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">char</span> newfile[<span class="number">10000</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\&quot;</span>;</span><br><span class="line">		<span class="keyword">char</span> stu_info[<span class="number">50</span>], ins[<span class="number">50</span>], file[<span class="number">50</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\&quot;</span>;</span><br><span class="line">		Student all_stu[<span class="number">50</span>], goal_stu, stu=&#123;<span class="number">0</span>&#125;;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入学生所在学院\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; ins;</span><br><span class="line">		<span class="built_in">strcat</span>(file, ins);</span><br><span class="line">		<span class="built_in">strcat</span>(file, <span class="string">&quot;.txt&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;r&quot;</span>);</span><br><span class="line">		cout &lt;&lt;<span class="string">&quot;输入学生学号:\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu_info;</span><br><span class="line">		</span><br><span class="line">		isSearch = <span class="number">0</span>;</span><br><span class="line">		pos = <span class="number">0</span>;</span><br><span class="line">		num = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">for</span>(pos=<span class="number">0</span>; <span class="built_in">fread</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp)==<span class="number">1</span>; pos++)&#123;</span><br><span class="line">			<span class="keyword">if</span>(!<span class="built_in">strcmp</span>(stu.stu_num, stu_info))&#123;</span><br><span class="line">				goal_stu = stu;</span><br><span class="line">				isSearch = <span class="number">1</span>;</span><br><span class="line">			&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">				all_stu[num++] = stu;</span><br><span class="line">			&#125;		</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">if</span>(isSearch)&#123;</span><br><span class="line">			<span class="built_in">fclose</span>(fp);</span><br><span class="line">			fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;w&quot;</span>);</span><br><span class="line">			<span class="keyword">for</span>(i =<span class="number">0</span>; i&lt;num; i++)&#123;</span><br><span class="line">				<span class="built_in">fwrite</span>(&amp;all_stu[i], <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">		<span class="built_in">fclose</span>(fp);</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入信息：\n\n&quot;</span>;</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入学号：\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_num;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入姓名:\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.name;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入身份证号：\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_id;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入学生类型:1/本, 2/硕, 3/博\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.stu_type;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入所在学院：\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.institute;</span><br><span class="line">		</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;请输入所在专业：\n&quot;</span>;</span><br><span class="line">		cin &gt;&gt; stu.major;</span><br><span class="line">		</span><br><span class="line">		<span class="built_in">strcat</span>(newfile, stu.institute);</span><br><span class="line">		<span class="built_in">strcat</span>(newfile, <span class="string">&quot;.txt&quot;</span>);</span><br><span class="line">		fp = <span class="built_in">fopen</span>(newfile, <span class="string">&quot;a&quot;</span>);</span><br><span class="line">		<span class="built_in">fwrite</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp); </span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		cout &lt;&lt; <span class="string">&quot;查无此人\n&quot;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	<span class="built_in">fclose</span>(fp);</span><br><span class="line">	cout &lt;&lt; file &lt;&lt;endl;</span><br><span class="line">	fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;r&quot;</span>);</span><br><span class="line">	<span class="keyword">while</span>(<span class="built_in">fread</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp)==<span class="number">1</span>)&#123;</span><br><span class="line">		<span class="built_in">Print</span>(stu);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">fclose</span>(fp);</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;是否继续修改y/n \n&quot;</span>;</span><br><span class="line">	cin &gt;&gt; c;</span><br><span class="line">	&#125; </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">print_Sort</span><span class="params">()</span></span>&#123;</span><br><span class="line">	FILE* fp;</span><br><span class="line">	<span class="keyword">int</span> j, Min;</span><br><span class="line">	<span class="keyword">int</span> num = <span class="number">0</span>;</span><br><span class="line">	<span class="keyword">int</span> i;</span><br><span class="line">	Student all_stu[<span class="number">50</span>]=&#123;<span class="number">0</span>&#125;, stu=&#123;<span class="number">0</span>&#125;;</span><br><span class="line">	<span class="keyword">char</span> newfile[<span class="number">10000</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\sort_&quot;</span>;</span><br><span class="line">	<span class="keyword">char</span> ins[<span class="number">20</span>], file[<span class="number">50</span>] = <span class="string">&quot;C:\\Users\\Administrator\\Desktop\\&quot;</span>;</span><br><span class="line">	</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;请输入学院:\n&quot;</span>;</span><br><span class="line">	cin &gt;&gt; ins;</span><br><span class="line">	</span><br><span class="line">	<span class="built_in">strcat</span>(file, ins);</span><br><span class="line">	<span class="built_in">strcat</span>(file, <span class="string">&quot;.txt&quot;</span>);</span><br><span class="line">	</span><br><span class="line">	fp = <span class="built_in">fopen</span>(file, <span class="string">&quot;r&quot;</span>);</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">while</span>(<span class="built_in">fread</span>(&amp;all_stu[num++], <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp) == <span class="number">1</span>)&#123;</span><br><span class="line">		;		</span><br><span class="line">	&#125;</span><br><span class="line">	fclose;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">for</span>(i=<span class="number">0</span>; i&lt;num<span class="number">-1</span>; i++)&#123;</span><br><span class="line">		Min = i;</span><br><span class="line">		<span class="keyword">for</span>(j=i+<span class="number">1</span>; j&lt;num; j++)&#123;</span><br><span class="line">			<span class="keyword">if</span>(<span class="built_in">strcmp</span>(all_stu[Min].stu_num, all_stu[j].stu_num) &gt;<span class="number">0</span>)&#123;</span><br><span class="line">				Min = j;				</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">if</span>(Min != i)&#123;</span><br><span class="line">			Student temp = all_stu[i];</span><br><span class="line">			all_stu[i] = all_stu[Min];</span><br><span class="line">			all_stu[Min] = temp;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="built_in">strcat</span>(newfile, ins);</span><br><span class="line">	<span class="built_in">strcat</span>(newfile, <span class="string">&quot;.txt&quot;</span>); </span><br><span class="line">	fp = <span class="built_in">fopen</span>(newfile, <span class="string">&quot;w&quot;</span>);</span><br><span class="line">	<span class="keyword">for</span>(i=<span class="number">0</span>; i&lt;num; i++)&#123;</span><br><span class="line">		<span class="built_in">fwrite</span>(&amp;all_stu[i], <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp);</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="built_in">fclose</span>(fp);</span><br><span class="line">	</span><br><span class="line">	fp = <span class="built_in">fopen</span>(newfile, <span class="string">&quot;r&quot;</span>);</span><br><span class="line">	<span class="keyword">while</span>(<span class="built_in">fread</span>(&amp;stu, <span class="built_in"><span class="keyword">sizeof</span></span>(Student), <span class="number">1</span>, fp)==<span class="number">1</span>)&#123;</span><br><span class="line">		<span class="built_in">Print</span>(stu);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="built_in">fclose</span>(fp); </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">passwordVerify</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">char</span> password[<span class="number">20</span>]=&#123;<span class="number">0</span>&#125;;</span><br><span class="line">	    <span class="keyword">int</span> i=<span class="number">5</span>;</span><br><span class="line">	    <span class="built_in">printf</span>(<span class="string">&quot;\n\n&quot;</span>);</span><br><span class="line">	    <span class="built_in">printf</span>(<span class="string">&quot;====================欢迎使用学生返校信息管理系统====================\n\n&quot;</span>);</span><br><span class="line">	  </span><br><span class="line">	    <span class="keyword">while</span>(i&gt;<span class="number">0</span>)&#123;</span><br><span class="line">	    <span class="built_in">printf</span>(<span class="string">&quot;请输入登录密码：&quot;</span>);</span><br><span class="line">	    <span class="built_in">scanf</span>(<span class="string">&quot;%s&quot;</span>,&amp;password);</span><br><span class="line">	        <span class="keyword">if</span>(<span class="built_in">strcmp</span>(password,<span class="string">&quot;123456&quot;</span>)!=<span class="number">0</span>)&#123;</span><br><span class="line">	            --i;</span><br><span class="line">	            <span class="built_in">printf</span>(<span class="string">&quot;密码输入错误，请重新输入，您还有%d次机会\n&quot;</span>,i);</span><br><span class="line">	        &#125;</span><br><span class="line">	        <span class="keyword">else</span>&#123;</span><br><span class="line">	            <span class="built_in">printf</span>(<span class="string">&quot;密码输入正确！&quot;</span>);</span><br><span class="line">	            <span class="keyword">break</span>;&#125;</span><br><span class="line">	    <span class="keyword">if</span>(i==<span class="number">0</span>)&#123;</span><br><span class="line">	        <span class="built_in">exit</span>(<span class="number">0</span>);&#125;</span><br><span class="line">	    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">chooseMenu</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="keyword">int</span> flag;</span><br><span class="line">	<span class="keyword">char</span> c=<span class="string">&#x27;y&#x27;</span>;</span><br><span class="line">	<span class="keyword">while</span>(c==<span class="string">&#x27;y&#x27;</span>)&#123;</span><br><span class="line">	    <span class="built_in">printf</span>(<span class="string">&quot;请输入您需要的操作（按5请求帮助）： \n&quot;</span>);</span><br><span class="line">	    flag=<span class="number">0</span>;</span><br><span class="line">	    <span class="built_in">scanf</span>(<span class="string">&quot;%d&quot;</span>,&amp;flag);</span><br><span class="line">	    <span class="built_in">getchar</span>();</span><br><span class="line">	    <span class="keyword">if</span>(flag==<span class="number">1</span>)&#123;                    <span class="comment">//录入</span></span><br><span class="line">	        <span class="built_in">WriteStuInfo</span>();</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> <span class="keyword">if</span>(flag==<span class="number">2</span>)&#123;               <span class="comment">//查找</span></span><br><span class="line">	        <span class="built_in">Search</span>();</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> <span class="keyword">if</span>(flag==<span class="number">3</span>)&#123;               <span class="comment">//修改</span></span><br><span class="line">	        <span class="built_in">Alter</span>();</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> <span class="keyword">if</span>(flag==<span class="number">4</span>)&#123;               <span class="comment">//排序</span></span><br><span class="line">	       <span class="built_in">print_Sort</span>();</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> <span class="keyword">if</span>(flag==<span class="number">5</span>)&#123;               <span class="comment">//导航</span></span><br><span class="line">	        <span class="built_in">Instruction</span>();</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> <span class="keyword">if</span>(flag==<span class="number">6</span>)&#123;               <span class="comment">//退出系统</span></span><br><span class="line">	        <span class="built_in">exit</span>(<span class="number">0</span>);</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="keyword">else</span> &#123;</span><br><span class="line">	        <span class="built_in">printf</span>(<span class="string">&quot;输入有误！请重新输入！\n &quot;</span>);</span><br><span class="line">	        <span class="keyword">continue</span>;</span><br><span class="line">	    &#125;</span><br><span class="line">	    <span class="built_in">printf</span>(<span class="string">&quot;是否继续使用该系统（y/n）：&quot;</span>);</span><br><span class="line">	    <span class="built_in">scanf</span>(<span class="string">&quot;%c&quot;</span>,&amp;c);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>&#123;   <span class="built_in">passwordVerify</span>();</span><br><span class="line">    <span class="built_in">Instruction</span>();</span><br><span class="line">    <span class="built_in">system</span>(<span class="string">&quot;pause&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/17/C-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%9F%BA%E7%A1%80/">C++面向对象基础</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-17</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-03-17</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">802</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">6分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="职员类"   >
          <a href="#职员类" class="heading-link"><i class="fas fa-link"></i></a><a href="#职员类" class="headerlink" title="职员类"></a>职员类</h1>
      
        <h2 id="构造函数"   >
          <a href="#构造函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h2>
      
        <h2 id="set-get-方法"   >
          <a href="#set-get-方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#set-get-方法" class="headerlink" title="set get 方法"></a>set get 方法</h2>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;iostream&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="meta-keyword">include</span><span class="meta-string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"></span><br><span class="line"><span class="comment">//定义一个职员类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Employee</span>&#123;</span></span><br><span class="line">	<span class="comment">//属性与方法</span></span><br><span class="line">	</span><br><span class="line">	<span class="keyword">public</span>: <span class="comment">//公共方法</span></span><br><span class="line"></span><br><span class="line">		<span class="comment">//构造函数 有多个构造函数后 </span></span><br><span class="line">		<span class="comment">//默认的空构造函数 会被覆盖 建议加上 </span></span><br><span class="line">		<span class="built_in">Employee</span>()&#123;&#125;	 </span><br><span class="line">		<span class="built_in">Employee</span>(string name, string company, <span class="keyword">int</span> age);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//Set方法</span></span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">setName</span><span class="params">(string name)</span></span>;</span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">setCompany</span><span class="params">(string company)</span></span>;</span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">setAge</span><span class="params">(<span class="keyword">int</span> age)</span></span>;</span><br><span class="line"></span><br><span class="line">		<span class="comment">//Get方法</span></span><br><span class="line">		<span class="function">string <span class="title">getName</span><span class="params">()</span></span>;</span><br><span class="line">		<span class="function">string <span class="title">getCompany</span><span class="params">()</span></span>;</span><br><span class="line">		<span class="function"><span class="keyword">int</span> <span class="title">getAge</span><span class="params">()</span></span>;</span><br><span class="line"></span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">introduce</span><span class="params">()</span></span>;</span><br><span class="line">	<span class="keyword">private</span>:</span><br><span class="line">		<span class="comment">//私有属性 在类的外部不可直接调用</span></span><br><span class="line">		<span class="comment">//注意！不管是接口还是属性 还是方法</span></span><br><span class="line">		<span class="comment">//C++中 不明确指出public还是protected的 </span></span><br><span class="line">		<span class="comment">//默认是“private”！！！！</span></span><br><span class="line">		</span><br><span class="line">		string Name; <span class="comment">//姓名</span></span><br><span class="line">		string Company; <span class="comment">//所就职的公司</span></span><br><span class="line">		<span class="keyword">int</span> Age; <span class="comment">//年龄		</span></span><br><span class="line">&#125;; </span><br><span class="line"></span><br><span class="line"><span class="comment">//利用域名符:: 实现相应的方法 </span></span><br><span class="line"><span class="comment">//注意：实现相应方法的形参 必须对应相应的函数声明</span></span><br><span class="line"><span class="comment">//注意：使用this指针时 内部使用-&gt; 在主函数中的对象 使用.</span></span><br><span class="line">Employee::<span class="built_in">Employee</span>(string name, string company, <span class="keyword">int</span> age)&#123;</span><br><span class="line">	<span class="comment">//this指针 代表当前任意被调用的这个对象	</span></span><br><span class="line">	<span class="keyword">this</span>-&gt;Name = name;</span><br><span class="line">	<span class="keyword">this</span>-&gt;Company = company;</span><br><span class="line">	<span class="keyword">this</span>-&gt;Age = age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Employee::setName</span><span class="params">(string name)</span></span>&#123;</span><br><span class="line">	<span class="keyword">this</span>-&gt;Name = name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function">string <span class="title">Employee::getName</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>-&gt;Name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Employee::setCompany</span><span class="params">(string company)</span></span>&#123;</span><br><span class="line">	<span class="keyword">this</span>-&gt;Company = company;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function">string <span class="title">Employee::getCompany</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>-&gt;Company;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Employee::setAge</span><span class="params">(<span class="keyword">int</span> age)</span></span>&#123;</span><br><span class="line">	<span class="keyword">this</span>-&gt;Age = age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">Employee::getAge</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">this</span>-&gt;Age;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Employee::introduce</span><span class="params">()</span></span>&#123;</span><br><span class="line">	cout &lt;&lt; <span class="string">&quot;Name-&gt;&quot;</span> &lt;&lt; Name &lt;&lt; <span class="string">&quot;,&quot;</span> &lt;&lt; <span class="string">&quot;Company-&gt;&quot;</span> </span><br><span class="line">	&lt;&lt; Company &lt;&lt; <span class="string">&quot;,Age-&gt;&quot;</span> &lt;&lt;Age&lt;&lt;endl; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>&#123;	</span><br><span class="line">	string name = <span class="string">&quot;Vincent&quot;</span>;</span><br><span class="line">	string company = <span class="string">&quot;Tecent&quot;</span>;</span><br><span class="line">	<span class="keyword">int</span> age = <span class="number">21</span>;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//利用构造函数 new一个新的职员对象</span></span><br><span class="line">	Employee e1 = <span class="built_in">Employee</span>(name, company, age);</span><br><span class="line">	e1.<span class="built_in">introduce</span>();</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h1 id="实现虚拟接口"   >
          <a href="#实现虚拟接口" class="heading-link"><i class="fas fa-link"></i></a><a href="#实现虚拟接口" class="headerlink" title="实现虚拟接口"></a>实现虚拟接口</h1>
      
        <h2 id="职员具有实现接口的功能"   >
          <a href="#职员具有实现接口的功能" class="heading-link"><i class="fas fa-link"></i></a><a href="#职员具有实现接口的功能" class="headerlink" title="职员具有实现接口的功能"></a>职员具有实现接口的功能</h2>
      
        <h3 id="1-定义一个接口（Virtual-虚拟方法）"   >
          <a href="#1-定义一个接口（Virtual-虚拟方法）" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-定义一个接口（Virtual-虚拟方法）" class="headerlink" title="1.定义一个接口（Virtual 虚拟方法）"></a>1.定义一个接口（Virtual 虚拟方法）</h3>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">AbstractEmployee</span>&#123;</span></span><br><span class="line">	<span class="keyword">public</span>:</span><br><span class="line">		<span class="function"><span class="keyword">virtual</span> <span class="keyword">void</span> <span class="title">AskForPromotion</span><span class="params">()</span></span>=<span class="number">0</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></div></figure>


        <h3 id="2-声明某个类实现-这个AbstractClass"   >
          <a href="#2-声明某个类实现-这个AbstractClass" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-声明某个类实现-这个AbstractClass" class="headerlink" title="2.声明某个类实现 :这个AbstractClass"></a>2.声明某个类实现 :这个AbstractClass</h3>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Employee</span>:</span>AbstractEmployee&#123;</span><br><span class="line">	<span class="keyword">public</span>:</span><br><span class="line">		<span class="comment">//.....公共方法</span></span><br><span class="line">		<span class="comment">//将接口中的方法 作为实现这个方法的类的成员函数</span></span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">AskForPromotion</span><span class="params">()</span></span>;</span><br><span class="line">	<span class="keyword">private</span>:</span><br><span class="line">		<span class="comment">//.....私有属性</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></div></figure>


        <h3 id="3-具体实现函数"   >
          <a href="#3-具体实现函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-具体实现函数" class="headerlink" title="3.具体实现函数"></a>3.具体实现函数</h3>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Employee::AskForPromotion</span><span class="params">()</span></span>&#123;</span><br><span class="line">	<span class="comment">//具体方法</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h1 id="程序员（Employee类的子类-继承Employee）"   >
          <a href="#程序员（Employee类的子类-继承Employee）" class="heading-link"><i class="fas fa-link"></i></a><a href="#程序员（Employee类的子类-继承Employee）" class="headerlink" title="程序员（Employee类的子类 继承Employee）"></a>程序员（Employee类的子类 继承Employee）</h1>
      
        <h3 id="1-程序员类具有自己特有的构造函数-amp-成员函数"   >
          <a href="#1-程序员类具有自己特有的构造函数-amp-成员函数" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-程序员类具有自己特有的构造函数-amp-成员函数" class="headerlink" title="1.程序员类具有自己特有的构造函数&amp;成员函数"></a>1.程序员类具有自己特有的构造函数&amp;成员函数</h3>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Developer</span>:</span> Employee&#123;</span><br><span class="line">	<span class="keyword">public</span>:</span><br><span class="line">		<span class="comment">//别忘了默认的构造函数 以及声明程序员类特有的构造函数</span></span><br><span class="line">		<span class="built_in">Developer</span>()&#123;&#125;</span><br><span class="line">		<span class="built_in">Developer</span>(string name, string company, <span class="keyword">int</span> age, string fav);</span><br><span class="line">		<span class="comment">//继承Employee的同时 Developer类具有Employee的公共方法</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">//Set函数与Get函数 是Developer独有的方法</span></span><br><span class="line">		<span class="function"><span class="keyword">void</span> <span class="title">setFavProgLang</span><span class="params">(string language)</span></span>;</span><br><span class="line">		<span class="function">string <span class="title">getFavProgLang</span><span class="params">()</span></span>; </span><br><span class="line">	<span class="keyword">private</span>:</span><br><span class="line">		string FavProgLang; <span class="comment">//最喜欢的编程语言 </span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></div></figure>


        <h3 id="2-实现这个构造函数以及成员函数-Empl…-表示由其父类来实现前三个参数"   >
          <a href="#2-实现这个构造函数以及成员函数-Empl…-表示由其父类来实现前三个参数" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-实现这个构造函数以及成员函数-Empl…-表示由其父类来实现前三个参数" class="headerlink" title="2.实现这个构造函数以及成员函数(:Empl… 表示由其父类来实现前三个参数)"></a>2.实现这个构造函数以及成员函数(:Empl… 表示由其父类来实现前三个参数)</h3>
      <figure class="highlight cpp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Developer::<span class="built_in">Developer</span>(string name, string company, <span class="keyword">int</span> age, string fav)</span><br><span class="line">	:<span class="built_in">Employee</span>(name, company, age)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">this</span>-&gt;FavProgLang = fav;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p><strong>注意：父类中的Name，Company，Age 在其子类Developer中都是不可获取的（Inaccessible）</strong><br><strong>因为，这些属性都是private 私有的，在类外任何地方都不能获取！</strong><br><strong>除非我们修改这些属性的修饰符 修改成protected</strong></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/03/17/SpringMVC/">SpringMVC学习笔记(所有代码FROM SIKI学院)</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-03-17</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-03-17</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">6.7k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">64分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="SpringMVC是什么？"   >
          <a href="#SpringMVC是什么？" class="heading-link"><i class="fas fa-link"></i></a><a href="#SpringMVC是什么？" class="headerlink" title="SpringMVC是什么？"></a>SpringMVC是什么？</h1>
      <pre><code>Spring MVC又叫SpringWebMVC是一个轻量级的基于请求响应的表现层框架。它是Spring框架的一部分。SpringMVC与Struts2都可以替代原始Servlet技术。
</code></pre>

        <h2 id="为什么要使用SpringMVC？"   >
          <a href="#为什么要使用SpringMVC？" class="heading-link"><i class="fas fa-link"></i></a><a href="#为什么要使用SpringMVC？" class="headerlink" title="为什么要使用SpringMVC？"></a>为什么要使用SpringMVC？</h2>
      <p>Spring Web MVC框架提供了MVC(模型 - 视图 - 控制器)架构和用于开发灵活和松散耦合的Web应用程序的组件。 MVC模式导致应用程序的不同方面(输入逻辑，业务逻辑和UI逻辑)分离，同时提供这些元素之间的松散耦合。</p>
<p>1、SpringMVC是极具代表性的MVC框架对初学者学习很有帮助；<br>    a)模型(Model)封装了应用程序数据，通常它们将由Bean对象组成；<br>    b)视图(View)负责渲染模型数据，一般来说它生成客户端浏览器可以解释HTML输出；<br>    c)控制器(Controller)负责处理用户请求并构建适当的模型，并将其传递给视图进行渲染；</p>
<p>2、与Spring框架无缝集成；<br>3、对Servlet轻度封装，框架小巧轻便性能好；<br>4、可使用注解式开发，编码简洁；<br>5、便于测试；<br>6、具有本地化、国际化、类型转换、数据验证等功能；<br>7、使用人群十分广泛，在现在的企业招聘中属于java程序员必备技能之一；</p>

        <h2 id="我能从这门课中学到什么？"   >
          <a href="#我能从这门课中学到什么？" class="heading-link"><i class="fas fa-link"></i></a><a href="#我能从这门课中学到什么？" class="headerlink" title="我能从这门课中学到什么？"></a>我能从这门课中学到什么？</h2>
      <p>1、SpringMVC框架学习：<br>a)了解SpringMVC框架处理流程；<br>b)掌握SpringMVC搭建、配置与使用；<br>c)Spring + SpringMVC + MyBatis 三大框架整合；<br>d)掌握SpringMVC基本参数与复杂参数绑定；<br>e)掌握SpringMVC自定义异常处理类、拦截器、图片上传等操作；<br>f)掌握SpringMVC处理Json格式字符串；</p>
<p>2、SSM框架练习项目：<br>a)使用整合后的SSM框架完成Steam后台游戏管理和前台游戏列表的Demo；</p>
<p>SpringMVC从哪获取？<br>以下网址可以获取Spring框架的所有版本，SpringMVC是Spring框架中的一个子包SpringWebMvc<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://repo.spring.io/release/org/springframework/spring/" >http://repo.spring.io/release/org/springframework/spring/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>

        <h1 id="Part-1-SpringMVC入门："   >
          <a href="#Part-1-SpringMVC入门：" class="heading-link"><i class="fas fa-link"></i></a><a href="#Part-1-SpringMVC入门：" class="headerlink" title="Part.1 SpringMVC入门："></a>Part.1 SpringMVC入门：</h1>
      
        <h2 id="1、SpringMVC简要处理流程："   >
          <a href="#1、SpringMVC简要处理流程：" class="heading-link"><i class="fas fa-link"></i></a><a href="#1、SpringMVC简要处理流程：" class="headerlink" title="1、SpringMVC简要处理流程："></a>1、SpringMVC简要处理流程：</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210317142755778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="2、HelloSpringMVC：搭建SpringMVC-HelloWorld项目"   >
          <a href="#2、HelloSpringMVC：搭建SpringMVC-HelloWorld项目" class="heading-link"><i class="fas fa-link"></i></a><a href="#2、HelloSpringMVC：搭建SpringMVC-HelloWorld项目" class="headerlink" title="2、HelloSpringMVC：搭建SpringMVC HelloWorld项目"></a>2、HelloSpringMVC：搭建SpringMVC HelloWorld项目</h2>
      <p>a)导包 –&gt; 02_jar -&gt; spring_jar整理 -&gt; spring_mvc；<br>b)DispatcherServlet配置和拦截规则 (前端控制器、任务派发器、前端调度器)；<br>c)使用SpringMVC显示页面；<br>d)使用SpringMVC向前台传递数据；</p>

        <h2 id="3、SpringMVC详细处理流程："   >
          <a href="#3、SpringMVC详细处理流程：" class="heading-link"><i class="fas fa-link"></i></a><a href="#3、SpringMVC详细处理流程：" class="headerlink" title="3、SpringMVC详细处理流程："></a>3、SpringMVC详细处理流程：</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210317142805622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="4、DispatcherServlet-properties内Bean对象："   >
          <a href="#4、DispatcherServlet-properties内Bean对象：" class="heading-link"><i class="fas fa-link"></i></a><a href="#4、DispatcherServlet-properties内Bean对象：" class="headerlink" title="4、DispatcherServlet.properties内Bean对象："></a>4、DispatcherServlet.properties内Bean对象：</h2>
      <p>a)HandlerMapping：处理器映射 ：将请求映射到Handler上并返回处理器执行链<br>i.通过HandlerMapping（处理器映射），可以将Web 请求映射到正确的Handler（处理器）也就是Controller上；<br>ii.DispactherServlet（前端控制器） 将请求交给HandlerMapping，让他检查请求并找到一个合适的HandlerExecutionChain（处理器执行链），这个HandlerExecutionChain 包含一个能处理该请求的Handler；</p>
<p>b)HandlerAdapter：处理器适配器 ：执行具体的逻辑业务<br>i.负责执行DispactherServlet中HandlerExecutionChain的Handler；<br>ii.从Handler中获取ModelAndView（模型与视图）对象，返回给DispactherServlet；</p>
<p>c)ViewResolver：视图解析器 ：解析视图<br>i.通过视图名称解析视图；<br>ii.返回视图对象；</p>
<p>d)HandlerExceptionResolver：处理器异常解析，将异常映射到统一错误页面，常见的404页面，不让用户看到具体的错误，友好提示；<br>e)LocaleResolver：本地化解析，解析客户端信息进行本地化；<br>f)ThemeResolver：主题解析，实现多风格，类似皮肤效果；<br>g)RequestToViewNameTranslator：请求到视图名转换器，当view为空时，从request中获取viewName；FlashMapManager：FlashMap管理器，通常应用在重定向场景；</p>
<p>5、SpringMVC Controller简要说明<br>a)RequestMapping注解使用：<br>i.多请求；<br>ii.限定请求方法；<br>iii.窄化(简化)请求路径;</p>
<p>b)Controller方法返回值：<br>i.ModelAndView：返回模型和视图<br>ii.void：使用原生request，response<br>iii.String：<br>1.返回视图名 viewName；比较推荐使用<br>2.转发 forword；<br>3.重定向 redirect；</p>
<p>iv.自定义类型(JSON) – 需要@ResponseBody注解 - </p>

        <h1 id="Part-2-SpringMVC-amp-Spring-amp-MyBatis整合："   >
          <a href="#Part-2-SpringMVC-amp-Spring-amp-MyBatis整合：" class="heading-link"><i class="fas fa-link"></i></a><a href="#Part-2-SpringMVC-amp-Spring-amp-MyBatis整合：" class="headerlink" title="Part.2 SpringMVC &amp; Spring &amp; MyBatis整合："></a>Part.2 SpringMVC &amp; Spring &amp; MyBatis整合：</h1>
      
        <h2 id="1、整合ssm-3大框架"   >
          <a href="#1、整合ssm-3大框架" class="heading-link"><i class="fas fa-link"></i></a><a href="#1、整合ssm-3大框架" class="headerlink" title="1、整合ssm 3大框架"></a>1、整合ssm 3大框架</h2>
      <p>a)导包 -&gt; spring_Jar整理 -&gt; ssm框架整合包<br>b)配置 -&gt; web.xml<br>i.读取spring配置文件；<br>ii.配置springmvc前端控制器；</p>
<p>c)配置 -&gt; applicationContext.xml<br>i.读取数据库配置文件；<br>ii.配置数据源连接池；<br>iii.开启注解扫描；<br>iv.配置事务核心管理器；<br>v.开启注解事务；<br>vi.配置视图解析器；</p>
<p>vii.配置Mybatis：<br>1.配置sqlSessionFactory；<br>2.配置别名；<br>3.配置mapper工厂；</p>

        <h2 id="2、准备测试用例"   >
          <a href="#2、准备测试用例" class="heading-link"><i class="fas fa-link"></i></a><a href="#2、准备测试用例" class="headerlink" title="2、准备测试用例"></a>2、准备测试用例</h2>
      <p>a)准备 – 测试数据：<br>i.Bean -&gt; 根据个人喜好；<br>ii.数据库表 -&gt; 根据个人喜好；<br>b)导入 – 测试数据 -&gt; 学习项目 -&gt; 后台页面<br>使用整合后的ssm框架，查询数据库测试表，将数据显示到前台</p>

        <h1 id="Part-3-SpringMVC参数绑定与数据交互："   >
          <a href="#Part-3-SpringMVC参数绑定与数据交互：" class="heading-link"><i class="fas fa-link"></i></a><a href="#Part-3-SpringMVC参数绑定与数据交互：" class="headerlink" title="Part.3 SpringMVC参数绑定与数据交互："></a>Part.3 SpringMVC参数绑定与数据交互：</h1>
      
        <h2 id="1、默认参数绑定：通过id查询游戏信息，并将结果显示在页面上；"   >
          <a href="#1、默认参数绑定：通过id查询游戏信息，并将结果显示在页面上；" class="heading-link"><i class="fas fa-link"></i></a><a href="#1、默认参数绑定：通过id查询游戏信息，并将结果显示在页面上；" class="headerlink" title="1、默认参数绑定：通过id查询游戏信息，并将结果显示在页面上；"></a>1、默认参数绑定：通过id查询游戏信息，并将结果显示在页面上；</h2>
      <p>a)HttpServletRequest request；<br>b)HttpServletResponse response；<br>c)HttpSession session；<br>d)Model model：将数据存储在request域，前台可以获取；</p>

        <h2 id="2、基本参数绑定：通过id删除游戏信息；"   >
          <a href="#2、基本参数绑定：通过id删除游戏信息；" class="heading-link"><i class="fas fa-link"></i></a><a href="#2、基本参数绑定：通过id删除游戏信息；" class="headerlink" title="2、基本参数绑定：通过id删除游戏信息；"></a>2、基本参数绑定：通过id删除游戏信息；</h2>
      <p>a)Integer、int；<br>b)Float、float；<br>c)Double、double；<br>d)Boolean、boolean；<br>e)String；</p>

        <h2 id="3、Bean对象参数绑定：添加游戏；"   >
          <a href="#3、Bean对象参数绑定：添加游戏；" class="heading-link"><i class="fas fa-link"></i></a><a href="#3、Bean对象参数绑定：添加游戏；" class="headerlink" title="3、Bean对象参数绑定：添加游戏；"></a>3、Bean对象参数绑定：添加游戏；</h2>
      <p>4、包装类参数绑定：多条件查询，并将结果显示在页面上；<br>5、解决表单post提交乱码：在web.xml中配置过滤器；</p>

        <h2 id="复杂类型参数绑定："   >
          <a href="#复杂类型参数绑定：" class="heading-link"><i class="fas fa-link"></i></a><a href="#复杂类型参数绑定：" class="headerlink" title="复杂类型参数绑定："></a>复杂类型参数绑定：</h2>
      <p>1、Array数组类型的参数绑定：为页面增加多选框，获取选定游戏信息的id，后续逻辑自行选择；<br>2、List类型的参数绑定：获取所有游戏价格，并且计算总价；</p>

        <h2 id="Json数据交互："   >
          <a href="#Json数据交互：" class="heading-link"><i class="fas fa-link"></i></a><a href="#Json数据交互：" class="headerlink" title="Json数据交互："></a>Json数据交互：</h2>
      <p> Json介绍：<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://www.bejson.com/knownjson/aboutjson/" >http://www.bejson.com/knownjson/aboutjson/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span><br>a)导包，配置注解驱动；<br>b)创建自己的Json对象；<br>c)发送和接收Json字符串；<br>d)修改游戏信息，在弹出层内回显数据；<br>e)使用@RequestBody完成List和数组参数绑定，获取所有游戏的名称，在后台打印；</p>

        <h1 id="Part-4-异常处理器与拦截器"   >
          <a href="#Part-4-异常处理器与拦截器" class="heading-link"><i class="fas fa-link"></i></a><a href="#Part-4-异常处理器与拦截器" class="headerlink" title="Part.4 异常处理器与拦截器"></a>Part.4 异常处理器与拦截器</h1>
      
        <h2 id="1、通过实现HandlerExceptionResolver接口完成异常处理；"   >
          <a href="#1、通过实现HandlerExceptionResolver接口完成异常处理；" class="heading-link"><i class="fas fa-link"></i></a><a href="#1、通过实现HandlerExceptionResolver接口完成异常处理；" class="headerlink" title="1、通过实现HandlerExceptionResolver接口完成异常处理；"></a>1、通过实现HandlerExceptionResolver接口完成异常处理；</h2>
      <p>a)异常处理器原理；<br><img   src="https://img-blog.csdnimg.cn/20210317142829243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>b)使用异常处理器捕获运行时异常；<br>c)使用异常处理器捕获自定义异常；</p>

        <h2 id="2、通过注解完成全局异常处理；"   >
          <a href="#2、通过注解完成全局异常处理；" class="heading-link"><i class="fas fa-link"></i></a><a href="#2、通过注解完成全局异常处理；" class="headerlink" title="2、通过注解完成全局异常处理；"></a>2、通过注解完成全局异常处理；</h2>
      <p>a)通过@ControllerAdvice注解使@ExceptionHandler异常处理注解应用到所有使用@RequestMapping的方法上；<br>b)处理运行时异常：直接打印错误信息；<br>c)处理自定义异常：将错误信息输出到error页面上； </p>

        <h2 id="拦截器Interceptor"   >
          <a href="#拦截器Interceptor" class="heading-link"><i class="fas fa-link"></i></a><a href="#拦截器Interceptor" class="headerlink" title="拦截器Interceptor"></a>拦截器Interceptor</h2>
      
        <h3 id="1、SpringMvc中的拦截器："   >
          <a href="#1、SpringMvc中的拦截器：" class="heading-link"><i class="fas fa-link"></i></a><a href="#1、SpringMvc中的拦截器：" class="headerlink" title="1、SpringMvc中的拦截器："></a>1、SpringMvc中的拦截器：</h3>
      <p>a)SpringMvc拦截器帮我们按照一定规则拦截请求，后根据开发人员自定义的拦截逻辑进行处理；<br>b)自定义拦截器需要实现HandlerInterceptor接口；<br>c)自定义的拦截器实现类需要在SpringMvc配置文件中配置；<br>d)可以配置多个拦截器，配置的顺序会影响到拦截器的执行顺序，配置在前的先执行；<br>e)HandlerInterceptor有3个接口：<br>i.preHandle 预处理：在拦截方法前执行；<br>ii.postHandle 后处理：在拦截方法后执行；<br>iii.afterCompletion 渲染后处理：在页面渲染后执行；<br>f)拦截器也体现了AOP思想；<br>g)拦截器的应用：权限检查，日志记录，性能检测等；</p>

        <h3 id="2、拦截器的执行流程图："   >
          <a href="#2、拦截器的执行流程图：" class="heading-link"><i class="fas fa-link"></i></a><a href="#2、拦截器的执行流程图：" class="headerlink" title="2、拦截器的执行流程图："></a>2、拦截器的执行流程图：</h3>
      <p><img   src="https://img-blog.csdnimg.cn/202103171428468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h3 id="3、拦截器的执行规则；"   >
          <a href="#3、拦截器的执行规则；" class="heading-link"><i class="fas fa-link"></i></a><a href="#3、拦截器的执行规则；" class="headerlink" title="3、拦截器的执行规则；"></a>3、拦截器的执行规则；</h3>
      <p>a)自定义2个拦截器，并在主配置文件中配置好；<br>b)运行服务进入拦截器，观察执行流程；</p>

        <h3 id="4、总结的五条拦截器规则；"   >
          <a href="#4、总结的五条拦截器规则；" class="heading-link"><i class="fas fa-link"></i></a><a href="#4、总结的五条拦截器规则；" class="headerlink" title="4、总结的五条拦截器规则；"></a>4、总结的五条拦截器规则；</h3>
      <p>a)preHandle预处理：————–根据拦截器定义的顺序，正向执行；<br>b)postHandle后处理：————-根据拦截器定义的顺序，逆向执行；<br>c)afterCompletion渲染后处理：—根据拦截器定义的顺序，逆向执行；<br>d)postHandle预处理：————-所有拦截器都返回成功调用；<br>e)atterCompletion渲染后处理：—preHandle返回true调用；</p>

        <h3 id="5、使用拦截器开发用户登录校验；"   >
          <a href="#5、使用拦截器开发用户登录校验；" class="heading-link"><i class="fas fa-link"></i></a><a href="#5、使用拦截器开发用户登录校验；" class="headerlink" title="5、使用拦截器开发用户登录校验；"></a>5、使用拦截器开发用户登录校验；</h3>
      <p>a)需要登录才可以访问列表页；<br>b)如果未登录重定向到登录页面；</p>

        <h3 id="6、使用拦截器搭配异常处理器完成用户登录时的异常处理；"   >
          <a href="#6、使用拦截器搭配异常处理器完成用户登录时的异常处理；" class="heading-link"><i class="fas fa-link"></i></a><a href="#6、使用拦截器搭配异常处理器完成用户登录时的异常处理；" class="headerlink" title="6、使用拦截器搭配异常处理器完成用户登录时的异常处理；"></a>6、使用拦截器搭配异常处理器完成用户登录时的异常处理；</h3>
      <p>a)使用自定义异常处理器捕获登录时异常；<br>b)如果出现异常，将异常信息发送到登录页面提示；</p>

        <h3 id="7、静态资源放行；"   >
          <a href="#7、静态资源放行；" class="heading-link"><i class="fas fa-link"></i></a><a href="#7、静态资源放行；" class="headerlink" title="7、静态资源放行；"></a>7、静态资源放行；</h3>
      <p>a)在web.xml配置DispatcherServlet的url-pattern以扩展名结尾，例如*.do，*.html 等；<br>b)在web.xml配置default servlet-mapping的url-pattern，以目录形式和扩展名形式；<br>c)在springmvc.xml中配置<span class="exturl"><a class="exturl__link"   href="mvc:resources/" >mvc:resources/</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>，该方法需要注意以下几点：<br>i.需要开启mvc:annotation-driven注解驱动；<br>ii.如果配置了拦截器，需要在拦截器中进行过滤，否则会被拦截；<br>iii.路径名不要打错 ;</p>

        <h3 id="8、RESTful风格开发：一种以URL定位资源的开发风格。使用RESTful开发URL会变得一目了然，更有层次，它不是标准或者协议；"   >
          <a href="#8、RESTful风格开发：一种以URL定位资源的开发风格。使用RESTful开发URL会变得一目了然，更有层次，它不是标准或者协议；" class="heading-link"><i class="fas fa-link"></i></a><a href="#8、RESTful风格开发：一种以URL定位资源的开发风格。使用RESTful开发URL会变得一目了然，更有层次，它不是标准或者协议；" class="headerlink" title="8、RESTful风格开发：一种以URL定位资源的开发风格。使用RESTful开发URL会变得一目了然，更有层次，它不是标准或者协议；"></a>8、RESTful风格开发：一种以URL定位资源的开发风格。使用RESTful开发URL会变得一目了然，更有层次，它不是标准或者协议；</h3>
      <p>更多关于RESTful风格的介绍网上查查；</p>
<p>使用RESTful前：<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/save" >http://127.0.0.1/item/save</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>            POST     新增物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/delete" >http://127.0.0.1/item/delete</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>             GET/POST     删除物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/update" >http://127.0.0.1/item/update</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>         POST     修改物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/query.do?id=1" >http://127.0.0.1/item/query.do?id=1</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>    GET          根据id查询物品</p>
<p>使用RESTful后：<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item" >http://127.0.0.1/item</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>                POST     新增物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/1" >http://127.0.0.1/item/1</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>             DELETE     根据id删除物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item" >http://127.0.0.1/item</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>                 PUT         修改物品<br><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://127.0.0.1/item/1" >http://127.0.0.1/item/1</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span>             GET          根据id查询物品</p>
<p>RESTful风格开发对Http协议中的基本方法的使用<br>POST    INSERT    增    邮寄一个新的<br>DELETE    DELETE    删    仍了，不要了<br>GET     SELECT    查    获取一个<br>PUT        UPDATE    改    往这个里边放点东西</p>
<p>使用Springmvc实现RESTful风格开发；<br>a)使用物品id当作请求路径，点击按钮，跳转到具体的页面；<br>b)当使用ajax时，页面不会跳转，需要到ajax回调中处理；</p>

        <h1 id="SPRINGMVC-PROJECT-1"   >
          <a href="#SPRINGMVC-PROJECT-1" class="heading-link"><i class="fas fa-link"></i></a><a href="#SPRINGMVC-PROJECT-1" class="headerlink" title="SPRINGMVC-PROJECT-1"></a>SPRINGMVC-PROJECT-1</h1>
      
        <h2 id="前端请求页面form-jsp"   >
          <a href="#前端请求页面form-jsp" class="heading-link"><i class="fas fa-link"></i></a><a href="#前端请求页面form-jsp" class="headerlink" title="前端请求页面form.jsp"></a>前端请求页面form.jsp</h2>
      <figure class="highlight jsp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;%@ page language=<span class="string">&quot;java&quot;</span> contentType=<span class="string">&quot;text/html; charset=UTF-8&quot;</span></span><br><span class="line">    pageEncoding=<span class="string">&quot;UTF-8&quot;</span>%&gt;</span><br><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta http-equiv=<span class="string">&quot;Content-Type&quot;</span> content=<span class="string">&quot;text/html; charset=UTF-8&quot;</span>&gt;</span><br><span class="line">&lt;title&gt;Insert title here&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;form action=<span class="string">&quot;$&#123;pageContext.request.contextPath&#125;/mylist.do&quot;</span> method=<span class="string">&quot;get&quot;</span>&gt;</span><br><span class="line">		&lt;input type=<span class="string">&quot;submit&quot;</span> value=<span class="string">&quot;提交&quot;</span>&gt;</span><br><span class="line">	&lt;/form&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></div></figure>


        <h2 id="WEB配置文件-web-xml"   >
          <a href="#WEB配置文件-web-xml" class="heading-link"><i class="fas fa-link"></i></a><a href="#WEB配置文件-web-xml" class="headerlink" title="WEB配置文件 web.xml"></a>WEB配置文件 web.xml</h2>
      <figure class="highlight xml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">web-app</span> <span class="attr">xmlns:xsi</span>=<span class="string">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://xmlns.jcp.org/xml/ns/javaee&quot;</span> <span class="attr">xsi:schemaLocation</span>=<span class="string">&quot;http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd&quot;</span> <span class="attr">id</span>=<span class="string">&quot;WebApp_ID&quot;</span> <span class="attr">version</span>=<span class="string">&quot;3.1&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">display-name</span>&gt;</span>ssm_spring_mvc<span class="tag">&lt;/<span class="name">display-name</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">servlet</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">servlet-name</span>&gt;</span>springmvc<span class="tag">&lt;/<span class="name">servlet-name</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">servlet-class</span>&gt;</span>org.springframework.web.servlet.DispatcherServlet<span class="tag">&lt;/<span class="name">servlet-class</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">init-param</span>&gt;</span></span><br><span class="line">  		<span class="comment">&lt;!-- 读取springmvc配置文件 --&gt;</span></span><br><span class="line">  		<span class="tag">&lt;<span class="name">param-name</span>&gt;</span>contextConfigLocation<span class="tag">&lt;/<span class="name">param-name</span>&gt;</span></span><br><span class="line">  		<span class="tag">&lt;<span class="name">param-value</span>&gt;</span>classpath:springmvc.xml<span class="tag">&lt;/<span class="name">param-value</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;/<span class="name">init-param</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">servlet</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">servlet-mapping</span>&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">servlet-name</span>&gt;</span>springmvc<span class="tag">&lt;/<span class="name">servlet-name</span>&gt;</span></span><br><span class="line">  	<span class="comment">&lt;!-- 拦截规则 --&gt;</span></span><br><span class="line">  	<span class="comment">&lt;!--1 *.htm *.do *.action   以扩展名方式进行拦截，不拦截静态资源  .jpg .css .js .png   什么情况下都可以使用</span></span><br><span class="line"><span class="comment">  		2 / 不拦截 jsp 拦截静态资源 .jpg .css .js .png  </span></span><br><span class="line"><span class="comment">  		/* 全都拦截 包括jsp 以及所有静态资源 不推荐使用的--&gt;</span></span><br><span class="line">  	<span class="tag">&lt;<span class="name">url-pattern</span>&gt;</span>*.do<span class="tag">&lt;/<span class="name">url-pattern</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">servlet-mapping</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">welcome-file-list</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>index.html<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>index.htm<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>index.jsp<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>default.html<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>default.htm<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>default.jsp<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">welcome-file-list</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">web-app</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h2 id="SPRINGMVC配置文件-springmvc-xml"   >
          <a href="#SPRINGMVC配置文件-springmvc-xml" class="heading-link"><i class="fas fa-link"></i></a><a href="#SPRINGMVC配置文件-springmvc-xml" class="headerlink" title="SPRINGMVC配置文件 springmvc.xml"></a>SPRINGMVC配置文件 springmvc.xml</h2>
      <figure class="highlight xml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">beans</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.springframework.org/schema/beans&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:xsi</span>=<span class="string">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:context</span>=<span class="string">&quot;http://www.springframework.org/schema/context&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:mvc</span>=<span class="string">&quot;http://www.springframework.org/schema/mvc&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:aop</span>=<span class="string">&quot;http://www.springframework.org/schema/aop&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xsi:schemaLocation</span>=<span class="string">&quot;http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 开启注解扫描 基本包下有 bean,controller层.. --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">context:component-scan</span> <span class="attr">base-package</span>=<span class="string">&quot;com.sikiedu&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">context:component-scan</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 配置视图解析器  配置viewName 前缀与后缀 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">class</span>=<span class="string">&quot;org.springframework.web.servlet.view.InternalResourceViewResolver&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;prefix&quot;</span> <span class="attr">value</span>=<span class="string">&quot;/WEB-INF/jsp/&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;suffix&quot;</span> <span class="attr">value</span>=<span class="string">&quot;.jsp&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">		</span><br><span class="line"><span class="tag">&lt;/<span class="name">beans</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>

        <h2 id="BEAN对象-ItemInfo-java"   >
          <a href="#BEAN对象-ItemInfo-java" class="heading-link"><i class="fas fa-link"></i></a><a href="#BEAN对象-ItemInfo-java" class="headerlink" title="BEAN对象 ItemInfo.java"></a>BEAN对象 ItemInfo.java</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ItemInfo</span> </span>&#123;</span><br><span class="line">	<span class="comment">//id</span></span><br><span class="line">	<span class="keyword">private</span> String item_id;</span><br><span class="line">	<span class="comment">//name</span></span><br><span class="line">	<span class="keyword">private</span> String item_name;</span><br><span class="line">	<span class="comment">//type</span></span><br><span class="line">	<span class="keyword">private</span> String item_type;</span><br><span class="line">	<span class="comment">//price</span></span><br><span class="line">	<span class="keyword">private</span> String item_price;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h2 id="Controller层-ItemController-java"   >
          <a href="#Controller层-ItemController-java" class="heading-link"><i class="fas fa-link"></i></a><a href="#Controller层-ItemController-java" class="headerlink" title="Controller层 ItemController.java"></a>Controller层 ItemController.java</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;!-- 注解表示是控制层 通过springmvc注解扫描 --&gt;</span><br><span class="line">&lt;!-- RequestMapping对应前端页面的请求路径 --&gt;</span><br><span class="line"><span class="meta">@Controller</span> </span><br><span class="line"><span class="meta">@RequestMapping(value=&quot;/item/&quot;)</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ItemController</span>  </span>&#123;</span><br><span class="line"></span><br><span class="line">	<span class="comment">//显示页面	</span></span><br><span class="line">	<span class="meta">@RequestMapping(value= &#123;&quot;list.do&quot;, &quot;mylist.do&quot;&#125;, method= &#123;RequestMethod.GET, RequestMethod.POST&#125;)</span></span><br><span class="line">	&lt;!-- 指定返回类型是ModelAndView 表示最后会跳转页面 --&gt;</span><br><span class="line">	<span class="function"><span class="keyword">public</span> ModelAndView <span class="title">list</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		ModelAndView mav = <span class="keyword">new</span> ModelAndView();</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//传递数据</span></span><br><span class="line">		<span class="comment">//准备一些测试数据</span></span><br><span class="line">		ItemInfo info1 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;1&quot;</span>, <span class="string">&quot;王者荣耀&quot;</span>, <span class="string">&quot;MOBA&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info2 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;2&quot;</span>, <span class="string">&quot;守望先锋&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;198&quot;</span>) ;</span><br><span class="line">		ItemInfo info3 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;3&quot;</span>, <span class="string">&quot;吃鸡&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;98&quot;</span>) ;</span><br><span class="line">		ItemInfo info4 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;4&quot;</span>, <span class="string">&quot;魔兽世界&quot;</span>, <span class="string">&quot;MMORPG&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info5 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;5&quot;</span>, <span class="string">&quot;保卫萝卜&quot;</span>, <span class="string">&quot;休闲&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		</span><br><span class="line">		List&lt;ItemInfo&gt; itemList = <span class="keyword">new</span> ArrayList&lt;ItemInfo&gt;();</span><br><span class="line">		itemList.add(info1);</span><br><span class="line">		itemList.add(info2);</span><br><span class="line">		itemList.add(info3);</span><br><span class="line">		itemList.add(info4);</span><br><span class="line">		itemList.add(info5);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//将游戏列表返回给前台</span></span><br><span class="line">		mav.addObject(<span class="string">&quot;itemList&quot;</span>, itemList);</span><br><span class="line">		</span><br><span class="line">		mav.setViewName(<span class="string">&quot;item_list&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">return</span> mav;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="meta">@RequestMapping(value= &#123;&quot;mylist1.do&quot;&#125;, method= &#123;RequestMethod.GET, RequestMethod.POST&#125;)</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> ModelAndView <span class="title">list1</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		ModelAndView mav = <span class="keyword">new</span> ModelAndView();</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//传递数据</span></span><br><span class="line">		<span class="comment">//准备一些测试数据</span></span><br><span class="line">		ItemInfo info1 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;1&quot;</span>, <span class="string">&quot;王者荣耀&quot;</span>, <span class="string">&quot;MOBA&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info2 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;2&quot;</span>, <span class="string">&quot;守望先锋&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;198&quot;</span>) ;</span><br><span class="line">		ItemInfo info3 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;3&quot;</span>, <span class="string">&quot;吃鸡&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;98&quot;</span>) ;</span><br><span class="line">		ItemInfo info4 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;4&quot;</span>, <span class="string">&quot;魔兽世界&quot;</span>, <span class="string">&quot;MMORPG&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info5 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;5&quot;</span>, <span class="string">&quot;保卫萝卜&quot;</span>, <span class="string">&quot;休闲&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		</span><br><span class="line">		List&lt;ItemInfo&gt; itemList = <span class="keyword">new</span> ArrayList&lt;ItemInfo&gt;();</span><br><span class="line">		itemList.add(info1);</span><br><span class="line">		itemList.add(info2);</span><br><span class="line">		itemList.add(info3);</span><br><span class="line">		itemList.add(info4);</span><br><span class="line">		itemList.add(info5);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//将游戏列表返回给前台 指定Viewname即显示的页面是哪一个？</span></span><br><span class="line">		</span><br><span class="line">		mav.addObject(<span class="string">&quot;itemList&quot;</span>, itemList);		</span><br><span class="line">		mav.setViewName(<span class="string">&quot;item_list&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">return</span> mav;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//void</span></span><br><span class="line">	<span class="meta">@RequestMapping(value=&quot;&quot;)</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">voidTest</span><span class="params">(HttpServletRequest request, HttpServletResponse response)</span> <span class="keyword">throws</span> ServletException, IOException </span>&#123;</span><br><span class="line">		<span class="comment">//获取参数</span></span><br><span class="line">		request.getParameter(<span class="string">&quot;&quot;</span>);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//转发</span></span><br><span class="line">		request.getRequestDispatcher(<span class="string">&quot;&quot;</span>).forward(request, response);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//重定向</span></span><br><span class="line">		response.sendRedirect(request.getContextPath() + <span class="string">&quot;/xx.jsp&quot;</span>);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//String 转发</span></span><br><span class="line">	<span class="meta">@RequestMapping(&quot;forwardString.do&quot;)</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">forwardString</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="string">&quot;forward:mylist1.do&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//String 重定向</span></span><br><span class="line">	<span class="meta">@RequestMapping(&quot;redirectString.do&quot;)</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">redirectString</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="string">&quot;redirect:/form.jsp&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//String </span></span><br><span class="line">	<span class="meta">@RequestMapping(&quot;testList.do&quot;)</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">testList</span><span class="params">(Model model)</span> </span>&#123;</span><br><span class="line">		<span class="comment">//传递数据</span></span><br><span class="line">		<span class="comment">//准备一些测试数据</span></span><br><span class="line">		ItemInfo info1 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;1&quot;</span>, <span class="string">&quot;王者荣耀&quot;</span>, <span class="string">&quot;MOBA&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info2 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;2&quot;</span>, <span class="string">&quot;守望先锋&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;198&quot;</span>) ;</span><br><span class="line">		ItemInfo info3 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;3&quot;</span>, <span class="string">&quot;吃鸡&quot;</span>, <span class="string">&quot;射击&quot;</span>, <span class="string">&quot;98&quot;</span>) ;</span><br><span class="line">		ItemInfo info4 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;4&quot;</span>, <span class="string">&quot;魔兽世界&quot;</span>, <span class="string">&quot;MMORPG&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		ItemInfo info5 = <span class="keyword">new</span> ItemInfo(<span class="string">&quot;5&quot;</span>, <span class="string">&quot;保卫萝卜&quot;</span>, <span class="string">&quot;休闲&quot;</span>, <span class="string">&quot;0&quot;</span>) ;</span><br><span class="line">		</span><br><span class="line">		List&lt;ItemInfo&gt; itemList = <span class="keyword">new</span> ArrayList&lt;ItemInfo&gt;();</span><br><span class="line">		itemList.add(info1);</span><br><span class="line">		itemList.add(info2);</span><br><span class="line">		itemList.add(info3);</span><br><span class="line">		itemList.add(info4);</span><br><span class="line">		itemList.add(info5);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//将游戏列表返回给前台</span></span><br><span class="line">		model.addAttribute(<span class="string">&quot;itemList&quot;</span>, itemList);</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">return</span> <span class="string">&quot;item_list&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

        <h2 id="数据显示页面-item-list-jsp"   >
          <a href="#数据显示页面-item-list-jsp" class="heading-link"><i class="fas fa-link"></i></a><a href="#数据显示页面-item-list-jsp" class="headerlink" title="数据显示页面 item_list.jsp"></a>数据显示页面 item_list.jsp</h2>
      <figure class="highlight jsp"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br></pre></td><td class="code"><pre><span class="line">&lt;%@ page language=<span class="string">&quot;java&quot;</span> contentType=<span class="string">&quot;text/html; charset=UTF-8&quot;</span> pageEncoding=<span class="string">&quot;UTF-8&quot;</span>%&gt;</span><br><span class="line">&lt;%@ taglib uri=<span class="string">&quot;http://java.sun.com/jsp/jstl/core&quot;</span> prefix=<span class="string">&quot;c&quot;</span>%&gt;</span><br><span class="line">&lt;!DOCTYPE html PUBLIC <span class="string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="string">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span>&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">		&lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">		&lt;title&gt;游戏管理后台&lt;/title&gt;</span><br><span class="line">        &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;</span>&gt;</span><br><span class="line">        &lt;meta http-equiv=<span class="string">&quot;X-UA-Compatible&quot;</span> content=<span class="string">&quot;IE=edge&quot;</span>&gt;</span><br><span class="line">    &lt;/head&gt;</span><br><span class="line">    &lt;body <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;side_menu_active side_menu_expanded&quot;</span>&gt;</span><br><span class="line">        &lt;div id=<span class="string">&quot;page_wrapper&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">            &lt;!-- header --&gt;</span><br><span class="line">            &lt;header id=<span class="string">&quot;main_header&quot;</span>&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container-fluid&quot;</span>&gt;</span><br><span class="line">                	&lt;!--logo--&gt;</span><br><span class="line">                    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;brand_section&quot;</span>&gt;</span><br><span class="line">                        &lt;a href=<span class="string">&quot;#&quot;</span>&gt;&lt;img src=<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/picture/logo01.png&quot;</span> alt=<span class="string">&quot;site_logo&quot;</span> width=<span class="string">&quot;108&quot;</span> height=<span class="string">&quot;40&quot;</span> style=<span class="string">&quot;margin-top: 5px&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;header_user_actions dropdown&quot;</span>&gt;</span><br><span class="line">                        &lt;div data-toggle=<span class="string">&quot;dropdown&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;dropdown-toggle user_dropdown&quot;</span>&gt;</span><br><span class="line">                            &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;user_avatar&quot;</span>&gt;</span><br><span class="line">                                &lt;img src=<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/picture/head01.png&quot;</span> width=<span class="string">&quot;38&quot;</span> height=<span class="string">&quot;38&quot;</span>&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                            &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;caret&quot;</span>&gt;&lt;/span&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                        &lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;dropdown-menu dropdown-menu-right&quot;</span>&gt;</span><br><span class="line">                            &lt;li&gt;&lt;a href=<span class="string">&quot;#&quot;</span>&gt;个人中心&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                            &lt;li&gt;&lt;a href=<span class="string">&quot;#&quot;</span>&gt;注销&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                        &lt;/ul&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/header&gt;</span><br><span class="line"></span><br><span class="line">            &lt;!-- main content --&gt;</span><br><span class="line">            &lt;div id=<span class="string">&quot;main_wrapper&quot;</span>&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;container-fluid&quot;</span>&gt;</span><br><span class="line">                    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;row&quot;</span>&gt;</span><br><span class="line">                        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-md-12&quot;</span>&gt;</span><br><span class="line">                            &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;row&quot;</span>&gt;</span><br><span class="line">                                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-md-10&quot;</span>&gt;</span><br><span class="line">                                    &lt;table <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;table table-yuk2 toggle-arrow-tiny&quot;</span> id=<span class="string">&quot;footable_demo&quot;</span> data-filter=<span class="string">&quot;#textFilter&quot;</span> data-page-size=<span class="string">&quot;5&quot;</span>&gt;</span><br><span class="line">                                        &lt;thead&gt;</span><br><span class="line">                                            &lt;tr&gt;</span><br><span class="line">                                            	&lt;!--描述：商品数据标签--&gt;</span><br><span class="line">                                                &lt;th&gt;ID&lt;/th&gt;</span><br><span class="line">                                                &lt;th&gt;游戏名称&lt;/th&gt;</span><br><span class="line">                                                &lt;th&gt;类型&lt;/th&gt;</span><br><span class="line">                                                &lt;th&gt;原价&lt;/th&gt;</span><br><span class="line">                                            &lt;/tr&gt;</span><br><span class="line">                                        &lt;/thead&gt;</span><br><span class="line">                                        &lt;tbody&gt;</span><br><span class="line">                                       		&lt;c:forEach items=<span class="string">&quot;$&#123;itemList &#125;&quot;</span> <span class="keyword">var</span>=<span class="string">&quot;item&quot;</span>&gt;</span><br><span class="line">	                                        	&lt;tr&gt;</span><br><span class="line">	                                                &lt;td&gt;$&#123;item.item_id &#125;&lt;/td&gt;</span><br><span class="line">	                                                &lt;td&gt;$&#123;item.item_name &#125;&lt;/td&gt;</span><br><span class="line">	                                                &lt;td&gt;$&#123;item.item_type &#125;&lt;/td&gt;</span><br><span class="line">	                                                &lt;td&gt;$&#123;item.item_price &#125;&lt;/td&gt;</span><br><span class="line">	                                                </span><br><span class="line">	                                                &lt;td data-value=<span class="string">&quot;1&quot;</span>&gt;</span><br><span class="line">	                                                	&lt;a herf=<span class="string">&quot;#&quot;</span> id=<span class="string">&quot;edit_btn&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-xs btn-info&quot;</span> data-toggle=<span class="string">&quot;modal&quot;</span> data-target=<span class="string">&quot;#editLayer&quot;</span> onclick=<span class="string">&quot;editGoods(&#x27;$&#123;item.item_id&#125;&#x27;)&quot;</span>&gt;修改&lt;/a&gt;</span><br><span class="line">	                                                	&lt;a herf=<span class="string">&quot;#&quot;</span>  id=<span class="string">&quot;del_btn&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-xs btn-danger&quot;</span> onclick=<span class="string">&quot;deleteGoods(&#x27;$&#123;item.item_id&#125;&#x27;)&quot;</span>&gt;删除&lt;/a&gt;</span><br><span class="line">	                                                &lt;/td&gt;</span><br><span class="line">	                                           	&lt;/tr&gt;</span><br><span class="line">                                        	&lt;/c:forEach&gt;</span><br><span class="line">                                        &lt;/tbody&gt;</span><br><span class="line">                                        &lt;tfoot <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;hide-if-no-paging&quot;</span>&gt;</span><br><span class="line">                                            &lt;tr&gt;</span><br><span class="line">                                                &lt;td colspan=<span class="string">&quot;5&quot;</span>&gt;</span><br><span class="line">                                                    &lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;pagination pagination-sm&quot;</span>&gt;&lt;/ul&gt;</span><br><span class="line">                                                &lt;/td&gt;</span><br><span class="line">                                            &lt;/tr&gt;</span><br><span class="line">                                        &lt;/tfoot&gt;</span><br><span class="line">                                    &lt;/table&gt;</span><br><span class="line">                                &lt;/div&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">            </span><br><span class="line">            &lt;!-- edit layer --&gt;</span><br><span class="line">            &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal fade&quot;</span> id=<span class="string">&quot;editLayer&quot;</span>&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-dialog modal-content&quot;</span>&gt;</span><br><span class="line">                    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-content&quot;</span>&gt;</span><br><span class="line">                        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-header&quot;</span>&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;close&quot;</span> data-dismiss=<span class="string">&quot;modal&quot;</span>&gt;&lt;span aria-hidden=<span class="string">&quot;true&quot;</span>&gt;&amp;times;&lt;/span&gt;&lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;sr-only&quot;</span>&gt;Close&lt;/span&gt;&lt;/button&gt;</span><br><span class="line">                            &lt;h4 <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-title&quot;</span>&gt;修改游戏信息&lt;/h4&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                   	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-body&quot;</span>&gt;</span><br><span class="line">                        &lt;!--游戏修改详情弹出层表单--&gt;</span><br><span class="line">	                    &lt;form <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-horizontal&quot;</span> id=<span class="string">&quot;edit_item_form&quot;</span>&gt;</span><br><span class="line">	                    	&lt;!-- 游戏id隐藏域 --&gt;</span><br><span class="line">							&lt;input type=<span class="string">&quot;hidden&quot;</span> id=<span class="string">&quot;edit_item_id&quot;</span> name=<span class="string">&quot;item_id&quot;</span>/&gt;</span><br><span class="line">							&lt;!-- 游戏名称 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;edit_item_name&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;游戏名称&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;edit_item_name&quot;</span> placeholder=<span class="string">&quot;游戏名称&quot;</span> name=<span class="string">&quot;item_name&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">							&lt;!-- 游戏类型 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;edit_item_price&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;类型&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;edit_item_price&quot;</span> placeholder=<span class="string">&quot;类型&quot;</span> name=<span class="string">&quot;item_price&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">							&lt;!-- 游戏原价 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;edit_item_price&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;原价&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;edit_item_price&quot;</span> placeholder=<span class="string">&quot;原价&quot;</span> name=<span class="string">&quot;item_price&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">						&lt;/form&gt;  </span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-footer&quot;</span>&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-default btn-sm&quot;</span> data-dismiss=<span class="string">&quot;modal&quot;</span>&gt;取消&lt;/button&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-primary btn-sm&quot;</span> onclick=<span class="string">&quot;updateItem()&quot;</span>&gt;确认修改&lt;/button&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">            </span><br><span class="line">             &lt;!-- add layer --&gt;</span><br><span class="line">            &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal fade&quot;</span> id=<span class="string">&quot;addLayer&quot;</span>&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-dialog modal-content&quot;</span>&gt;</span><br><span class="line">                    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-content&quot;</span>&gt;</span><br><span class="line">                        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-header&quot;</span>&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;close&quot;</span> data-dismiss=<span class="string">&quot;modal&quot;</span>&gt;&lt;span aria-hidden=<span class="string">&quot;true&quot;</span>&gt;&amp;times;&lt;/span&gt;&lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;sr-only&quot;</span>&gt;Close&lt;/span&gt;&lt;/button&gt;</span><br><span class="line">                            &lt;h4 <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-title&quot;</span>&gt;新增游戏&lt;/h4&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                   	&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-body&quot;</span>&gt;</span><br><span class="line">                        &lt;!--添加游戏弹出层表单--&gt;</span><br><span class="line">	                    &lt;form <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-horizontal&quot;</span> id=<span class="string">&quot;add_item_form&quot;</span>&gt;</span><br><span class="line">	                    	&lt;!-- 游戏id隐藏域 --&gt;</span><br><span class="line">							&lt;input type=<span class="string">&quot;hidden&quot;</span> id=<span class="string">&quot;add_item_id&quot;</span> name=<span class="string">&quot;item_id&quot;</span>/&gt;</span><br><span class="line">							&lt;!-- 游戏名称 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;add_item_name&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;游戏名称&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;add_item_name&quot;</span> placeholder=<span class="string">&quot;游戏名称&quot;</span> name=<span class="string">&quot;item_name&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">							&lt;!-- 游戏类型 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;add_item_price&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;类型&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;add_item_price&quot;</span> placeholder=<span class="string">&quot;类型&quot;</span> name=<span class="string">&quot;item_price&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">							&lt;!-- 游戏原价 --&gt;</span><br><span class="line">							&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-group&quot;</span>&gt;</span><br><span class="line">								&lt;label <span class="keyword">for</span>=<span class="string">&quot;add_item_price&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-2 control-label&quot;</span>&gt;原价&lt;/label&gt;</span><br><span class="line">								&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;col-sm-10&quot;</span>&gt;</span><br><span class="line">									&lt;input type=<span class="string">&quot;text&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;form-control&quot;</span> id=<span class="string">&quot;add_item_price&quot;</span> placeholder=<span class="string">&quot;原价&quot;</span> name=<span class="string">&quot;item_price&quot;</span>&gt;</span><br><span class="line">								&lt;/div&gt;</span><br><span class="line">							&lt;/div&gt;</span><br><span class="line">						&lt;/form&gt;  </span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                        &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;modal-footer&quot;</span>&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-default btn-sm&quot;</span> data-dismiss=<span class="string">&quot;modal&quot;</span>&gt;取消&lt;/button&gt;</span><br><span class="line">                            &lt;button type=<span class="string">&quot;button&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;btn btn-primary btn-sm&quot;</span> onclick=<span class="string">&quot;addItem()&quot;</span>&gt;确认修改&lt;/button&gt;</span><br><span class="line">                        &lt;/div&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">            </span><br><span class="line">            &lt;!-- main menu --&gt;</span><br><span class="line">            &lt;nav id=<span class="string">&quot;main_menu&quot;</span>&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;menu_wrapper&quot;</span>&gt;</span><br><span class="line">                    &lt;ul&gt;</span><br><span class="line">                        &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;first_level&quot;</span>&gt;</span><br><span class="line">                            &lt;a href=<span class="string">&quot;javascript:void(0)&quot;</span>&gt;</span><br><span class="line">                                &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;icon_document_alt first_level_icon&quot;</span>&gt;&lt;/span&gt;</span><br><span class="line">                                &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;menu-title&quot;</span>&gt;游戏管理&lt;/span&gt;</span><br><span class="line">                            &lt;/a&gt;</span><br><span class="line">                            &lt;ul&gt;</span><br><span class="line">                                &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;submenu-title&quot;</span>&gt;游戏管理&lt;/li&gt;</span><br><span class="line">                                &lt;!-- &lt;li&gt;&lt;a href=<span class="string">&quot;#&quot;</span> data-toggle=<span class="string">&quot;modal&quot;</span> data-target=<span class="string">&quot;#addLayer&quot;</span>&gt;商品添加&lt;/a&gt;&lt;/li&gt; --&gt;</span><br><span class="line">                                &lt;li&gt;&lt;a href=<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/item/list.do&quot;</span>&gt;游戏列表&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                            &lt;/ul&gt;</span><br><span class="line">                        &lt;/li&gt;</span><br><span class="line">                    &lt;/ul&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">                &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;menu_toggle&quot;</span>&gt;</span><br><span class="line">                    &lt;span <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;icon_menu_toggle&quot;</span>&gt;</span><br><span class="line">                        &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;arrow_carrot-2left toggle_left&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">                        &lt;i <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;arrow_carrot-2right toggle_right&quot;</span> style=<span class="string">&quot;display:none&quot;</span>&gt;&lt;/i&gt;</span><br><span class="line">                    &lt;/span&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/nav&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">	        $(function() &#123;</span><br><span class="line">	            <span class="comment">//footable</span></span><br><span class="line">	            yukon_footable.goodslist();</span><br><span class="line">	            <span class="comment">//datepicker</span></span><br><span class="line">	            yukon_datepicker.p_forms_extended();</span><br><span class="line">	        &#125;)</span><br><span class="line">	        </span><br><span class="line">	        <span class="comment">//修改弹框回显</span></span><br><span class="line">	       	<span class="function">function <span class="title">toEdit</span><span class="params">(id)</span> </span>&#123;</span><br><span class="line">	   			$.ajax(&#123;</span><br><span class="line">	   				type:<span class="string">&quot;post&quot;</span>,</span><br><span class="line">	   				url:<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/item/toEdit&quot;</span>,</span><br><span class="line">	   				data:&#123;<span class="string">&quot;id&quot;</span>:id&#125;,</span><br><span class="line">	   				success:function(data) &#123;</span><br><span class="line">	   					$(<span class="string">&quot;#edit_item_name&quot;</span>).val(data.item_name);</span><br><span class="line">	   					$(<span class="string">&quot;#edit_item_type&quot;</span>).val(data.item_type);</span><br><span class="line">	   					$(<span class="string">&quot;#edit_item_price&quot;</span>).val(data.item_price);</span><br><span class="line">	   				&#125;,</span><br><span class="line">	   				dataType:<span class="string">&quot;json&quot;</span></span><br><span class="line">	   			&#125;);</span><br><span class="line">	   		&#125;</span><br><span class="line">	        <span class="comment">//确认修改</span></span><br><span class="line">			<span class="function">function <span class="title">updateItem</span><span class="params">()</span> </span>&#123;</span><br><span class="line">				$.post(</span><br><span class="line">					<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/item/update.do&quot;</span>,</span><br><span class="line">					$(<span class="string">&quot;#edit_item_form&quot;</span>).serialize(),</span><br><span class="line">					function(data)&#123;</span><br><span class="line">						alert(<span class="string">&quot;游戏信息更新成功!&quot;</span>);</span><br><span class="line">						window.location.reload();</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">	        <span class="comment">//确认删除</span></span><br><span class="line">			<span class="function">function <span class="title">deleteItem</span><span class="params">(id)</span> </span>&#123;</span><br><span class="line">				<span class="keyword">if</span>(confirm(<span class="string">&#x27;确实要删除该游戏吗?&#x27;</span>)) &#123;</span><br><span class="line">					$.post(</span><br><span class="line">						<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/item/delete.do&quot;</span>,</span><br><span class="line">						&#123;<span class="string">&quot;id&quot;</span>:id&#125;,</span><br><span class="line">						function(data)&#123;</span><br><span class="line">							window.location.reload();</span><br><span class="line">					&#125;);</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			</span><br><span class="line">	        <span class="comment">//添加游戏</span></span><br><span class="line">			<span class="function">function <span class="title">addItem</span><span class="params">()</span> </span>&#123;</span><br><span class="line">				$.post(</span><br><span class="line">					<span class="string">&quot;$&#123;pageContext.request.contextPath &#125;/item/save.do&quot;</span>,</span><br><span class="line">					$(<span class="string">&quot;#add_item_form&quot;</span>).serialize(),</span><br><span class="line">					function(data)&#123;</span><br><span class="line">						alert(<span class="string">&quot;游戏添加成功!&quot;</span>);</span><br><span class="line">						window.location.reload();</span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;</span><br><span class="line">		&lt;/script&gt;</span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></div></figure>




        <h1 id="SPRINGMVC-PROJECT-2"   >
          <a href="#SPRINGMVC-PROJECT-2" class="heading-link"><i class="fas fa-link"></i></a><a href="#SPRINGMVC-PROJECT-2" class="headerlink" title="SPRINGMVC-PROJECT-2"></a>SPRINGMVC-PROJECT-2</h1>
      
        <h2 id="新增登录拦截器与集成配置文件"   >
          <a href="#新增登录拦截器与集成配置文件" class="heading-link"><i class="fas fa-link"></i></a><a href="#新增登录拦截器与集成配置文件" class="headerlink" title="新增登录拦截器与集成配置文件"></a>新增登录拦截器与集成配置文件</h2>
      
        <h3 id="登录拦截器LoginIntercaptor-java"   >
          <a href="#登录拦截器LoginIntercaptor-java" class="heading-link"><i class="fas fa-link"></i></a><a href="#登录拦截器LoginIntercaptor-java" class="headerlink" title="登录拦截器LoginIntercaptor.java"></a>登录拦截器LoginIntercaptor.java</h3>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">LoginInterceptor</span> <span class="keyword">implements</span> <span class="title">HandlerInterceptor</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">	<span class="meta">@Override</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">preHandle</span><span class="params">(HttpServletRequest request, HttpServletResponse response, Object handler)</span></span></span><br><span class="line"><span class="function">			<span class="keyword">throws</span> Exception </span>&#123;</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//获取请求</span></span><br><span class="line">		String URI = request.getRequestURI();</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">if</span>(!URI.contains(<span class="string">&quot;login&quot;</span>)) &#123;</span><br><span class="line">			<span class="comment">//不是登录请求 拦截</span></span><br><span class="line">			Object user = request.getSession().getAttribute(<span class="string">&quot;user&quot;</span>);</span><br><span class="line">			</span><br><span class="line">			<span class="keyword">if</span>(user == <span class="keyword">null</span>) &#123;</span><br><span class="line">				<span class="comment">//没有登录 重定向到登录页面 / 请求</span></span><br><span class="line">				response.sendRedirect(request.getContextPath()+<span class="string">&quot;/login/login.do&quot;</span>);</span><br><span class="line">				<span class="keyword">return</span> <span class="keyword">false</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">true</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h3 id="集成配置文件-applicationContext-xml"   >
          <a href="#集成配置文件-applicationContext-xml" class="heading-link"><i class="fas fa-link"></i></a><a href="#集成配置文件-applicationContext-xml" class="headerlink" title="集成配置文件 applicationContext.xml"></a>集成配置文件 applicationContext.xml</h3>
      <figure class="highlight xml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">beans</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.springframework.org/schema/beans&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:xsi</span>=<span class="string">&quot;http://www.w3.org/2001/XMLSchema-instance&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:context</span>=<span class="string">&quot;http://www.springframework.org/schema/context&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:aop</span>=<span class="string">&quot;http://www.springframework.org/schema/aop&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:mvc</span>=<span class="string">&quot;http://www.springframework.org/schema/mvc&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xmlns:tx</span>=<span class="string">&quot;http://www.springframework.org/schema/tx&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">xsi:schemaLocation</span>=<span class="string">&quot;http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd</span></span></span><br><span class="line"><span class="string"><span class="tag">		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 读取配置文件 数据库 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">context:property-placeholder</span> <span class="attr">location</span>=<span class="string">&quot;classpath:db.properties&quot;</span>/&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 配置数据源 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">name</span>=<span class="string">&quot;dataSource&quot;</span> <span class="attr">class</span>=<span class="string">&quot;com.mchange.v2.c3p0.ComboPooledDataSource&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;driverClass&quot;</span> <span class="attr">value</span>=<span class="string">&quot;$&#123;jdbc.driverClass&#125;&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;jdbcUrl&quot;</span> <span class="attr">value</span>=<span class="string">&quot;$&#123;jdbc.jdbcUrl&#125;&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;user&quot;</span> <span class="attr">value</span>=<span class="string">&quot;$&#123;jdbc.user&#125;&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span> <span class="attr">value</span>=<span class="string">&quot;$&#123;jdbc.password&#125;&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">		<span class="comment">&lt;!-- 开启注解扫描 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">context:component-scan</span> <span class="attr">base-package</span>=<span class="string">&quot;com.sikiedu&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">context:component-scan</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 静态资源放行 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:resources</span> <span class="attr">location</span>=<span class="string">&quot;/css/&quot;</span> <span class="attr">mapping</span>=<span class="string">&quot;/css/**&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:resources</span> <span class="attr">location</span>=<span class="string">&quot;/fonts/&quot;</span> <span class="attr">mapping</span>=<span class="string">&quot;/fonts/**&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:resources</span> <span class="attr">location</span>=<span class="string">&quot;/js/&quot;</span> <span class="attr">mapping</span>=<span class="string">&quot;/js/**&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:resources</span> <span class="attr">location</span>=<span class="string">&quot;/picture/&quot;</span> <span class="attr">mapping</span>=<span class="string">&quot;/picture/**&quot;</span>/&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 开启注解驱动 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:annotation-driven</span>/&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 事务核心管理器 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">name</span>=<span class="string">&quot;transactionManager&quot;</span> <span class="attr">class</span>=<span class="string">&quot;org.springframework.jdbc.datasource.DataSourceTransactionManager&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;dataSource&quot;</span> <span class="attr">ref</span>=<span class="string">&quot;dataSource&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 开启注解事务 --&gt;</span>		</span><br><span class="line">		<span class="tag">&lt;<span class="name">tx:annotation-driven</span>/&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 配置视图解析器 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">class</span>=<span class="string">&quot;org.springframework.web.servlet.view.InternalResourceViewResolver&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;prefix&quot;</span> <span class="attr">value</span>=<span class="string">&quot;/WEB-INF/jsp/&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;suffix&quot;</span> <span class="attr">value</span>=<span class="string">&quot;.jsp&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- 配置mybatis --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">name</span>=<span class="string">&quot;sqlSessionFactory&quot;</span> <span class="attr">class</span>=<span class="string">&quot;org.mybatis.spring.SqlSessionFactoryBean&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;dataSource&quot;</span> <span class="attr">ref</span>=<span class="string">&quot;dataSource&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;typeAliasesPackage&quot;</span> <span class="attr">value</span>=<span class="string">&quot;com.sikiedu.bean&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="comment">&lt;!-- mapper工厂 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">bean</span> <span class="attr">class</span>=<span class="string">&quot;org.mybatis.spring.mapper.MapperScannerConfigurer&quot;</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">property</span> <span class="attr">name</span>=<span class="string">&quot;basePackage&quot;</span> <span class="attr">value</span>=<span class="string">&quot;com.sikiedu.mapper&quot;</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">bean</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		<span class="tag">&lt;<span class="name">mvc:interceptors</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 登录验证拦截器 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">mvc:interceptor</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:exclude-mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**/*.css&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:exclude-mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**/*.js&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:exclude-mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**/*.png&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:exclude-mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**/*.tff&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">mvc:exclude-mapping</span> <span class="attr">path</span>=<span class="string">&quot;/**/*.woff&quot;</span>/&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">bean</span> <span class="attr">class</span>=<span class="string">&quot;com.sikiedu.interceptor.LoginInterceptor&quot;</span>/&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">mvc:interceptor</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">mvc:interceptors</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">beans</span>&gt;</span></span><br></pre></td></tr></table></div></figure></div></div></article></section><nav class="paginator"><div class="paginator-inner"><a class="extend prev" rel="prev" href="/blog/page/2/"><i class="fas fa-angle-left"></i></a><a class="page-number" href="/blog/">1</a><a class="page-number" href="/blog/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/blog/page/4/">4</a><a class="page-number" href="/blog/page/5/">5</a><a class="extend next" rel="next" href="/blog/page/4/"><i class="fas fa-angle-right"></i></a></div></nav></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/blog/images/avatar.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">C'est la vie</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/blog/archives/"><div class="sidebar-ov-state-item__count">48</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/blog/categories/"><div class="sidebar-ov-state-item__count">19</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/blog/tags/"><div class="sidebar-ov-state-item__count">20</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/blog/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2021</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>何水浪</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.0</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章（支持多关键词，请用空格分隔）"></div><div class="search-results"></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script>function initSearch() {
  var isXML = true;
  var search_path = 'search.json';

  if (!search_path) {
    search_path = 'search.xml';
  } else if (/json$/i.test(search_path)) {
    isXML = false;
  }

  var path = '/blog/' + search_path;
  $.ajax({
    url: path,
    dataType: isXML ? 'xml' : 'json',
    async: true,
    success: function (res) {
      var datas = isXML ? $('entry', res).map(function () {
        // 将 XML 转为 JSON
        return {
          title: $('title', this).text(),
          content: $('content', this).text(),
          url: $('url', this).text()
        };
      }).get() : res;
      var $input = $('.search-input input');
      var $result = $('.search-results');
      // 搜索对象（标题、内容）的权重，影响显示顺序
      var WEIGHT = { title: 100, content: 1 };
      var searchPost = function () {
        var searchText = $input.val().toLowerCase().trim();
        // 根据空白字符分隔关键字
        var keywords = searchText.split(/[\s]+/);
        // 搜索结果
        var matchPosts = [];

        // 有多个关键字时，将原文字整个保存下来
        if (keywords.length > 1) {
          keywords.push(searchText);
        }
        // 防止未输入字符时搜索
        if (searchText.length > 0) {
          datas.forEach(function (data) {
            var isMatch  = false;
            // 没有标题的文章使用预设的 i18n 变量代替
            var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
            var titleLower = title && title.toLowerCase();
            // 删除 HTML 标签 和 所有空白字符
            var content = data.content && data.content.replace(/<[^>]+>/g, '');
            var contentLower = content && content.toLowerCase();
            // 删除重复的 /
            var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
            // 标题中匹配到的关键词
            var titleHitSlice = [];
            // 内容中匹配到的关键词
            var contentHitSlice = [];

            keywords.forEach(function (keyword) {
              /**
              * 获取匹配的关键词的索引
              * @param {String} keyword 要匹配的关键字
              * @param {String} text 原文字
              * @param {Boolean} caseSensitive 是否区分大小写
              * @param {Number} weight 匹配对象的权重。权重大的优先显示
              * @return {Array}
              */
              function getIndexByword (word, text, caseSensitive, weight) {
                if (!word || !text) {
                  return [];
                };

                var startIndex = 0; // 每次匹配的开始索引
                var index = -1;     // 匹配到的索引值
                var result = [];    // 匹配结果

                if (!caseSensitive) {
                  word = word.toLowerCase();
                  text = text.toLowerCase();
                }

                while((index = text.indexOf(word, startIndex)) !== -1) {
                  var hasMatch = false;
                  // 索引位置相同的关键词，保留长度较长的
                  titleHitSlice.forEach(function (hit) {
                    if (hit.index === index && hit.word.length < word.length) {
                      hit.word = word;
                      hasMatch = true;
                    }
                  });
                  startIndex = index + word.length;
                  !hasMatch && result.push({ index: index, word: word, weight: weight });
                }
                return result;
              }
              titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
              contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
            });

            var hitTitle = titleHitSlice.length;
            var hitContent = contentHitSlice.length;

            if (hitTitle > 0 || hitContent > 0) {
              isMatch = true;
            }
            if (isMatch) {
              ;[titleHitSlice, contentHitSlice].forEach(function (hit) {
                // 按照匹配文字的索引的递增顺序排序
                hit.sort(function (left, right) {
                  return left.index - right.index;
                });
              });
              /**
              * 给文本中匹配到的关键词添加标记，从而进行高亮显示
              * @param {String} text 原文本
              * @param {Array} hitSlice 匹配项的索引信息
              * @param {Number} start 开始索引
              * @param {Number} end 结束索引
              * @return {String}
              */
              function highlightKeyword (text, hitSlice, start, end) {
                if (!text || !hitSlice || !hitSlice.length) {
                  return;
                }

                var result = '';
                var startIndex = start;
                var endIndex = end;
                hitSlice.forEach(function (hit) {
                  if (hit.index < startIndex) {
                    return;
                  }

                  var hitWordEnd = hit.index + hit.word.length;
                  result += text.slice(startIndex, hit.index);
                  result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
                  startIndex = hitWordEnd;
                });
                result += text.slice(startIndex, endIndex);
                return result;
              }

              var postData = {};
              // 文章总的搜索权重
              var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
              // 标记匹配关键词后的标题
              var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
              // 标记匹配关键词后的内容
              var postContent;
              // 显示内容的长度
              var SHOW_WORD_LENGTH = 200;
              // 命中关键词前的字符显示长度
              var SHOW_WORD_FRONT_LENGTH = 20;
              var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;

              // 截取匹配的第一个字符，前后共 200 个字符来显示
              if (contentHitSlice.length > 0) {
                var firstIndex = contentHitSlice[0].index;
                var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
                var end = firstIndex + SHOW_WORD_END_LENGTH;
                postContent = highlightKeyword(content, contentHitSlice, start, end);
              } else { // 未匹配到内容，直接截取前 200 个字符来显示
                postContent = content.slice(0, SHOW_WORD_LENGTH);
              }
              postData.title = postTitle;
              postData.content = postContent;
              postData.url = postURL;
              postData.weight = postWeight;
              matchPosts.push(postData);
            }
          });
        }

        var resultInnerHtml = '';
        if (matchPosts.length) {
          // 按权重递增的顺序排序，使权重大的优先显示
          matchPosts.sort(function (left, right) {
            return right.weight - left.weight;
          });
          resultInnerHtml += '<ul>';
          matchPosts.forEach(function (post) {
            resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
            resultInnerHtml += post.title;
            resultInnerHtml += '</a><div class="search-results-content">';
            resultInnerHtml += post.content;
            resultInnerHtml += '</div></li>';
          });
          resultInnerHtml += '</ul>';
        } else {
          resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
        }
        $result.html(resultInnerHtml);
      };
      $input.on('input', searchPost);
      $input.on('keyup', function (e) {
        if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
          searchPost();
        }
      });
    }
  });
}

function closeSearch () {
  $('body').css({ overflow: 'auto' });
  $('.search-popup').css({ display: 'none' });
  $('.search-mask').css({ display: 'none' });
}

window.addEventListener('DOMContentLoaded', function () {
  Stun.utils.pjaxReloadLocalSearch = function () {
    $('.header-nav-search').on('click', function (e) {
      e.stopPropagation();
      $('body').css('overflow', 'hidden');
      $('.search-popup')
        .velocity('stop')
        .velocity('transition.expandIn', {
          duration: 300,
          complete: function () {
            $('.search-popup input').focus();
          }
        });
      $('.search-mask')
        .velocity('stop')
        .velocity('transition.fadeIn', {
          duration: 300
        });

      initSearch();
    });
    $('.search-mask, .search-close').on('click', function () {
      closeSearch();
    });
    $(document).on('keydown', function (e) {
      // Escape <=> 27
      if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
        closeSearch();
      }
    });
  };

  Stun.utils.pjaxReloadLocalSearch();
}, false);

function safeOpenUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

function extSearch(engine) {
  var engines = {
    google: 'https://www.google.com/search?q=',
    bing: 'https://cn.bing.com/search?q=',
    baidu: 'https://www.baidu.com/s?ie=UTF-8&wd=',
  };
  var host = window.location.host;
  var query = $('.search-input input').val().toLowerCase().trim();
  var uri = engines[engine] + query + ' site:' + host;

  if (query) {
    safeOpenUrl(uri);
  } else {
    Stun.utils.popAlert('warning', '请输入字符');
  }
}

var assistSearchList = window.CONFIG.assistSearch;

if (Array.isArray(assistSearchList)) {
  assistSearchList.forEach(function (name) {
    document.querySelector('.search-btns-item--' + name).addEventListener('click', function () {
      extSearch(name);
    }, false);
  });
}</script><script src="/blog/js/utils.js?v=2.6.2"></script><script src="/blog/js/stun-boot.js?v=2.6.2"></script><script src="/blog/js/scroll.js?v=2.6.2"></script><script src="/blog/js/header.js?v=2.6.2"></script><script src="/blog/js/sidebar.js?v=2.6.2"></script><script type="application/json" src="/blog/search.json"></script></body></html>